@import url('./features/wish-ritual.css');
#app { min-height: 100vh; }
.desktop-layout { min-height: 100vh; display: grid; grid-template-columns: minmax(330px, 1fr) 450px; gap: min(7vw, 100px); align-items: center; width: min(1120px, calc(100% - 60px)); margin: 0 auto; padding: 18px 0; }
@media (min-width: 831px) { .desktop-layout.app-focus { grid-template-columns: 450px; justify-content: center; width: min(450px, calc(100% - 60px)); gap: 0; }.desktop-layout.app-focus > .preview-aside { display: none; } }
.preview-aside { align-self: center; padding: 20px 0; }
.aside-brand { display: flex; align-items: center; gap: 15px; font-size: 1.25rem; font-weight: 800; letter-spacing: .06em; }
.aside-logo, .brand-mark { display: grid; place-items: center; flex: none; color: #fff; background: linear-gradient(145deg, var(--accent), var(--accent-strong)); box-shadow: 0 8px 20px color-mix(in srgb, var(--accent) 28%, transparent); }
.aside-logo { width: 48px; height: 48px; border-radius: 18px 18px 8px 18px; }
.preview-aside h2 { font-family: var(--font-ui); font-size: clamp(3.4rem, 5vw, 5.5rem); line-height: 1.24; letter-spacing: -.05em; margin: 60px 0 24px; }
.preview-aside > p { color: var(--muted); line-height: 1.9; max-width: 490px; font-size: 1.05rem; }
.aside-path { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; max-width: 450px; margin: 48px 0; }
.aside-path span { border-top: 1px solid var(--line); padding-top: 12px; font-weight: 700; }
.aside-foot { border-left: 3px solid var(--accent); padding-left: 16px; color: var(--muted); line-height: 1.8; font-size: .9rem; }
.aside-k12-nav { display: grid; gap: 9px; width: min(380px, 100%); margin: 24px 0 8px; }
.aside-k12-label { color: var(--accent-strong); font-size: .76rem; font-weight: 850; letter-spacing: .12em; text-transform: uppercase; }
.aside-k12-nav button { display: grid; gap: 3px; padding: 12px 14px; border: 1px solid color-mix(in srgb, var(--accent) 32%, #ddd); border-radius: 14px; background: color-mix(in srgb, var(--card) 86%, var(--accent) 14%); color: var(--ink); text-align: left; cursor: pointer; transition: transform .15s ease, border-color .15s ease, box-shadow .15s ease; }
.aside-k12-nav button:hover { transform: translateY(-1px); border-color: var(--accent-strong); box-shadow: 0 8px 18px color-mix(in srgb, var(--accent) 16%, transparent); }
.aside-k12-nav button[aria-current="page"] { border-color: var(--accent-strong); box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 22%, transparent); background: color-mix(in srgb, var(--card) 76%, var(--accent) 24%); }
.aside-k12-nav button:focus-visible { outline: 3px solid color-mix(in srgb, var(--accent-strong) 52%, transparent); outline-offset: 2px; }
.aside-k12-nav button b { font-size: .88rem; }
.aside-k12-nav button small { color: var(--muted); font-size: .75rem; line-height: 1.45; }
.aside-k12-page-list { display: grid; gap: 7px; max-height: min(42vh, 430px); overflow-y: auto; padding-right: 4px; }
.aside-k12-page-list button { padding: 9px 11px; border-radius: 11px; }
.aside-k12-page-list button b { font-size: .78rem; }
.aside-k12-page-list button small { font-size: .68rem; }
/* Keep every fixed page, sheet and FAB inside the application frame. */
.phone-shell { position: relative; display: flex; flex-direction: column; width: 450px; height: min(890px, calc(100vh - 36px)); min-height: 620px; contain: layout paint; background: var(--ui-bg); border: 8px solid #202333; border-radius: 44px; overflow: hidden; box-shadow: 0 40px 85px rgba(24, 28, 55, .23), 0 0 0 2px rgba(255,255,255,.85); isolation: isolate; }
.demo-ribbon { flex: none; display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 7px; min-height: 44px; padding: 8px 12px; background: var(--accent-strong); color: white; font-size: max(14px, .875rem); line-height: 1.4; text-align: center; white-space: normal; letter-spacing: .01em; }
.demo-ribbon strong { background: rgba(255,255,255,.2); border-radius: 6px; padding: 2px 6px; font-size: max(14px, .875rem); }
.k12-dream-shell:has(.k12-dream[data-page-id="K12-DREAM-chat"]) .demo-ribbon { min-height: 0; padding: 4px 7px; gap: 3px 6px; font-size: 11px; line-height: 1.2; }
.k12-dream-shell:has(.k12-dream[data-page-id="K12-DREAM-chat"]) .demo-ribbon strong { font-size: 11px; padding: 1px 4px; }
.demo-ribbon button { font-size: max(14px, .875rem); }
/* Preview disclosure is one quiet, consistent piece of app chrome. Keep the
   simulated-data label visible without turning every feature into a test page. */
:is(.phone-shell > .viewport > .demo-ribbon, .phone-shell > .demo-ribbon) {
  min-height: 36px;
  padding: 6px 16px;
  justify-content: flex-start;
  gap: 4px 8px;
  border-bottom: 1px solid var(--ui-border, #dce1e0);
  background: var(--ui-surface, #fff);
  color: var(--ui-text-subtle, #536169);
  font-size: 14px;
  line-height: 1.4;
  text-align: left;
}
:is(.phone-shell > .viewport > .demo-ribbon, .phone-shell > .demo-ribbon) strong {
  padding: 0;
  background: transparent;
  color: var(--ui-text, #1e272b);
  font-size: 14px;
  font-weight: 700;
}
:is(.phone-shell > .viewport > .demo-ribbon, .phone-shell > .demo-ribbon) button {
  border-color: var(--ui-border, #dce1e0);
  background: var(--ui-surface, #fff);
  color: var(--ui-brand, #254e5b);
}
.memory-journey-shell .demo-ribbon,
.time-capsule-shell .demo-ribbon { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 8px; padding: 7px 10px; text-align: left; }
.memory-journey-shell .demo-ribbon strong,
.time-capsule-shell .demo-ribbon strong { justify-self: start; }
.memory-journey-shell .demo-ribbon span,
.time-capsule-shell .demo-ribbon span { grid-column: 1 / -1; }
.memory-journey-shell .demo-ribbon button,
.time-capsule-shell .demo-ribbon button { grid-column: 2; grid-row: 1; min-height: 44px; padding: 7px 9px; border: 1px solid rgba(255,255,255,.75); border-radius: 10px; background: rgba(255,255,255,.14); color: #fff; }
.topbar { flex: none; display: flex; align-items: center; justify-content: space-between; min-height: 62px; padding: 0 22px; background: color-mix(in srgb, var(--paper) 76%, var(--bg)); border-bottom: 1px solid var(--line); }
.brand { display: flex; align-items: center; gap: 10px; font-weight: 850; font-size: 1.05rem; white-space: nowrap; }
.brand i { color: var(--accent); font-style: normal; }
.brand-mark { width: 32px; height: 32px; border-radius: 12px 12px 5px 12px; font-size: .85rem; }
.topbar-note { font-size: .73rem; color: var(--muted); }
.context { display: flex; flex-direction: column; align-items: flex-end; text-align: right; gap: 2px; min-width: 0; }
.context span { color: var(--muted); font-size: .7rem; }
.context strong { font-size: .78rem; white-space: nowrap; }
.context button { border: 0; padding: 0; background: transparent; color: var(--accent-strong); font-size: .64rem; font-weight: 700; }
.context-mobile { display: none; }
.page-heading { flex: none; display: flex; align-items: center; justify-content: center; position: relative; min-height: 52px; background: var(--bg); font-weight: 750; }
.page-heading .back { position: absolute; left: 14px; top: 4px; width: 44px; height: 44px; border: 0; border-radius: 14px; background: transparent; color: var(--ink); font-size: 1.7rem; line-height: 1; }
.page-heading small { position: absolute; right: 18px; color: var(--muted); font-weight: 600; font-size: .62rem; }
.viewport { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: var(--line) transparent; }
.screen { padding: 18px 23px 42px; }
.screen.settings-screen { display: block; padding: 18px 23px 42px; }
.screen h1 { font-family: var(--font-ui); font-size: var(--ui-type-title, 1.5rem); line-height: 1.38; letter-spacing: -.025em; margin: 7px 0 9px; overflow-wrap: anywhere; }
.screen h2 { margin: 0; font-size: 1.13rem; line-height: 1.4; }
.screen p { line-height: 1.65; }
.lede { color: var(--ui-text-subtle); margin: 0 0 24px; font-size: .9rem; }
.welcome-screen { padding: 0 23px 34px; }
.welcome-art { position: relative; height: 278px; overflow: hidden; margin: 0 -23px; background: url('/apps/consumer/assets/welcome-panda-bamboo-v1.webp') center 68% / cover no-repeat; }
.welcome-art::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(245,242,252,.02) 45%, var(--bg) 100%); }
.sun { display: none; position: absolute; right: 18%; top: 16%; width: 80px; height: 80px; border-radius: 50%; background: #fff9e9; box-shadow: 0 0 60px #fff9e9; }
.hill { display: none; position: absolute; width: 130%; height: 140px; border-radius: 50% 50% 0 0; bottom: -80px; left: -10%; }
.hill-a { background: color-mix(in srgb, var(--accent) 24%, white); transform: rotate(-7deg); }
.hill-b { background: color-mix(in srgb, var(--accent) 34%, white); left: 22%; bottom: -96px; transform: rotate(10deg); }
.spark { display: none; position: absolute; color: white; font-size: 28px; }
.spark-a { top: 30px; left: 20%; }.spark-b { top: 110px; left: 68%; font-size: 16px; }
.welcome-copy { margin-top: -20px; position: relative; }
.welcome-copy h1 { font-family: var(--font-ui); font-size: 2.1rem; line-height: 1.36; margin: 0 0 10px; }
.welcome-copy p { color: var(--muted); font-size: .88rem; line-height: 1.7; }
.welcome-options { display: grid; gap: 12px; margin: 26px 0 0; }
.entry-card { display: flex; align-items: center; gap: 16px; width: 100%; min-height: 92px; padding: 16px; background: var(--paper); border: 1px solid var(--line); border-radius: 22px; color: var(--ink); text-align: left; box-shadow: var(--shadow); }
.entry-card:hover { border-color: var(--accent); transform: translateY(-2px); }
.entry-card.family { background: linear-gradient(130deg, var(--paper), var(--secondary)); }
.entry-icon { display: grid; place-items: center; flex: none; width: 50px; height: 50px; border-radius: 16px; background: var(--accent-soft); color: var(--accent); font-size: 1.6rem; }
.entry-card.family .entry-icon { background: var(--secondary); }
.entry-card span:nth-child(2) { display: grid; gap: 4px; min-width: 0; flex: 1; }
.entry-card strong { font-size: 1.05rem; }
.entry-card small { color: var(--muted); line-height: 1.45; }
.entry-card b { color: var(--accent); font-size: 1.5rem; }
.fine-print { color: var(--muted); font-size: .71rem; text-align: center; line-height: 1.5; margin-top: 20px; }
.auth-screen { position: relative; min-height: 100%; padding-top: 6px; background: radial-gradient(circle at 78% 3%, color-mix(in srgb, var(--accent-soft) 74%, transparent) 0 82px, transparent 83px); }
.auth-hero { position: relative; display: grid; align-content: end; min-height: 132px; margin: 0 -8px 17px; padding: 20px 22px; overflow: hidden; border-radius: 28px; color: #18354a; background: linear-gradient(140deg, #eff8f1 0%, #fff7e9 44%, #f1ecff 100%); }
.auth-hero::before,.auth-hero::after { content: ''; position: absolute; border-radius: 50%; filter: blur(.2px); }
.auth-hero::before { width: 160px; height: 160px; right: -42px; top: -70px; background: rgba(123,98,217,.13); }
.auth-hero::after { width: 110px; height: 110px; left: -35px; bottom: -62px; background: rgba(79,158,126,.15); }
.auth-hero span { position: relative; z-index: 1; width: max-content; padding: 5px 10px; border-radius: 10px 10px 4px 10px; color: white; background: linear-gradient(135deg,#5ba88c,#8170d8); font-weight: 850; letter-spacing: .12em; }
.auth-hero i { position: absolute; left: 95px; right: 28px; bottom: 54px; height: 1px; background: linear-gradient(90deg,rgba(91,168,140,.12),rgba(129,112,216,.4),transparent); transform: rotate(-5deg); }
.auth-hero b { position: relative; z-index: 1; margin-top: 13px; font-family: var(--ui-font); font-size: 1rem; font-weight: 700; }
.auth-heading > span { color: var(--accent-strong); font-size: 14px; font-weight: 700; }
.auth-heading h1 { margin: 5px 0 8px; font-size: 1.5rem; line-height: 1.35; }
.auth-heading p { margin: 0 0 20px; color: var(--muted); font-size: 14px; line-height: 1.5; }
.auth-preview-note { margin-bottom: 18px; padding: 16px; border: 1px solid var(--ui-border); border-radius: var(--ui-radius-card); background: var(--ui-surface); }
.auth-preview-note b { color: var(--ui-text); font-size: 14px; }
.auth-preview-note p { margin: 6px 0 0; color: var(--ui-text-subtle); font-size: 14px; line-height: 1.5; }
.auth-enter { margin-top: 0; }
.auth-back { margin-top: 8px; }

.auth-login {
  --auth-ink: var(--ui-text);
  --auth-muted: var(--ui-text-subtle);
  --auth-line: var(--ui-border);
  padding: 18px clamp(16px, 5vw, 28px) 28px;
  background: var(--ui-bg);
  color: var(--auth-ink);
}
.auth-login .auth-panda-cover {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 6px;
  min-height: 142px;
  padding: 14px 12px 14px 18px;
  margin-bottom: 16px;
  border-radius: var(--ui-radius-card);
  background: radial-gradient(circle at 86% 34%, var(--ui-warning-bg), transparent 49%), var(--ui-brand-soft);
  text-align: left;
}
.auth-login .auth-cover-brand { font-size: 14px; font-weight: 750; color: var(--auth-muted); }
.auth-login .auth-panda-cover h1 { margin: 4px 0 6px; font: 800 clamp(1.5rem, 5vw, 1.75rem)/1.25 var(--ui-font); overflow-wrap:anywhere; }
.auth-login .auth-panda-cover .auth-lede { font-size: 1rem; color: var(--auth-muted); }
.auth-login .auth-panda-cover img { display: block; width: clamp(80px, 25vw, 116px); height: auto; }
.auth-login .auth-form-card {
  display: grid;
  gap: 12px;
  padding: clamp(12px, 4vw, 20px);
  border: 1px solid var(--auth-line);
  border-radius: var(--ui-radius-card);
  background: var(--ui-surface);
}
.auth-login .auth-field { display: grid; gap: 6px; }
.auth-login .auth-method-tabs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 5px; padding: 4px; border-radius: var(--ui-radius-control); background: var(--ui-brand-soft); }
.auth-login .auth-method-tabs button { min-width:0; min-height: 44px; padding: 4px; border: 0; border-radius: var(--ui-radius-control); background: transparent; color: var(--auth-muted); font: 650 1rem/1.4 var(--ui-font); white-space:normal; overflow-wrap:anywhere; }
.auth-login .auth-method-tabs [aria-pressed="true"] { background: var(--ui-surface); color: var(--auth-ink); box-shadow: var(--ui-shadow); }
.auth-login .auth-method-tabs button:disabled { opacity: 1; cursor: not-allowed; }
.auth-login .auth-channel-availability { display:block; font-size:.8rem; font-weight:500; }
.auth-login .auth-channel-status { margin:0; color:var(--auth-muted); font-size:.9rem; line-height:1.5; }
.auth-login .auth-legal-link { min-height:44px; padding:2px 3px; border:0; background:transparent; color:var(--ui-brand); font:inherit; font-weight:650; text-decoration:underline; text-underline-offset:3px; cursor:pointer; }
.auth-login .auth-legal-link:disabled { color:var(--auth-muted); cursor:not-allowed; }
html.auth-legal-reader-open { overflow:hidden; }
.auth-legal-reader { box-sizing:border-box; width:min(calc(100vw - 24px),42rem); max-height:calc(100vh - 32px); max-height:calc(100dvh - 32px); margin:auto; padding:0; border:1px solid var(--ui-border); border-radius:var(--ui-radius-card); background:var(--ui-surface); color:var(--ui-text); box-shadow:var(--ui-shadow); }
.auth-legal-reader[open] { display:flex; flex-direction:column; }
.auth-legal-reader::backdrop { background:rgb(20 35 40 / .5); }
.auth-legal-reader-header { display:flex; align-items:flex-start; gap:12px; flex:none; padding:16px; border-bottom:1px solid var(--ui-border); }
.auth-legal-reader-header>div { min-width:0; flex:1; }
.auth-legal-reader h2 { margin:0; font:750 1.2rem/1.4 var(--ui-font); overflow-wrap:anywhere; }
.auth-legal-reader-header p { margin:6px 0 0; font-size:.85rem; line-height:1.5; overflow-wrap:anywhere; }
.auth-legal-reader-close { flex:none; min-width:60px; min-height:44px; border:1px solid var(--ui-border); border-radius:var(--ui-radius-control); background:var(--ui-surface); color:var(--ui-brand); font:650 1rem var(--ui-font); cursor:pointer; }
.auth-legal-reader-body { min-height:0; overflow-y:auto; overscroll-behavior:contain; padding:16px; font-size:1rem; line-height:1.75; overflow-wrap:anywhere; }
.auth-legal-reader-body h3 { margin:0 0 8px; font-size:1.05rem; }
.auth-legal-reader-body p { margin:0 0 22px; white-space:pre-wrap; }
.auth-legal-reader :focus-visible { outline:3px solid var(--ui-brand); outline-offset:3px; }
.auth-login .auth-field input {
  box-sizing: border-box;
  width: 100%;
  min-width: 0;
  min-height: 52px;
  padding: 8px 12px;
  border: 1px solid var(--auth-line);
  border-radius: 12px;
  background: var(--ui-surface);
  color: var(--auth-ink);
  font: 1rem var(--ui-font);
}
.auth-login .auth-field input::placeholder { color: var(--auth-muted); }
.auth-login .auth-label, .auth-login .auth-check { font-size: 1rem; color: var(--auth-ink); }
.auth-login .auth-check { display: flex; align-items: center; gap: 8px; min-height: 44px; }
.auth-login .auth-check input { flex: none; width: 18px; height: 18px; accent-color: var(--ui-brand); }
.auth-login .btn { min-height: 44px; }
.auth-login .btn.btn-primary { min-height:52px; background: var(--ui-brand); color: var(--ui-surface); }
.auth-login .btn-primary:disabled { background: var(--ui-brand-soft); color: var(--ui-text-subtle); }
.auth-login .auth-footer { display: grid; gap: 6px; margin-top: 10px; }
.auth-login .auth-guest-note { margin: 0 0 4px; color: var(--auth-muted); font-size: 14px; line-height: 1.45; }
.auth-login .auth-footer .auth-back { margin: 0; }
.auth-login .auth-service-status {
  margin: 0 0 12px;
  padding: 10px 14px;
  border: 1px solid var(--ui-warning);
  border-radius: 12px;
  background: var(--ui-warning-bg);
  color: var(--ui-warning);
  font-size: 14px;
}

.home-screen { padding-top: 5px; }
.stage-hero { position: relative; height: 304px; margin: -5px -23px 20px; overflow: hidden; background: var(--visual-1); }
.stage-hero img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 55%; }
.stage-hero::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(255,255,255,.88) 0%, rgba(255,255,255,.76) 28%, rgba(255,255,255,.12) 68%, rgba(255,255,255,0) 100%); }
.stage-hero-copy { position: relative; z-index: 1; padding: 20px 24px; max-width: 340px; }
.stage-hero-copy > span { color: var(--accent-strong); font-weight: 800; font-size: .78rem; letter-spacing: .04em; }
.stage-hero-copy h1 { margin: 8px 0 5px; font-size: 1.72rem; line-height: 1.32; text-shadow: 0 1px 6px rgba(255,255,255,.55); }
.stage-hero-copy p { margin: 0; color: var(--muted); font-weight: 700; font-size: .78rem; text-shadow: 0 1px 4px rgba(255,255,255,.55); }
.stage-hero-middle img { object-position: center 58%; }
.stage-hero-middle::after { background: linear-gradient(180deg, rgba(255,247,235,.91), rgba(255,247,235,.7) 32%, transparent 72%); }
.stage-hero-high img { object-position: center 56%; }
.stage-hero-high::after { background: linear-gradient(180deg, rgba(245,250,255,.93), rgba(245,250,255,.72) 30%, transparent 73%); }
.stage-hero-college img { object-position: center 58%; }
.stage-hero-college::after { background: linear-gradient(180deg, rgba(246,248,255,.94), rgba(246,248,255,.73) 30%, transparent 74%); }
.stage-hero-elder { height: 348px; }
.stage-hero-elder img { object-position: center 57%; }
.stage-hero-elder::after { background: linear-gradient(180deg, rgba(251,246,235,.97), rgba(251,246,235,.78) 31%, transparent 69%); }
.stage-hero-elder .stage-hero-copy { padding-top: 26px; }.stage-hero-elder h1 { font-size: 1.7rem; max-width: 320px; }
.hello span { color: var(--accent-strong); font-weight: 700; font-size: .85rem; }
.hello h1 { font-size: 1.72rem; margin: 10px 0 5px; }
.hello p { color: var(--muted); font-size: .87rem; margin: 0; }
.hero-landscape { height: 128px; position: relative; margin: 18px 0 20px; overflow: hidden; border-radius: 22px; background: linear-gradient(145deg, var(--visual-1), var(--visual-2) 86%); }
.hero-orb { position: absolute; right: 45px; top: 17px; width: 75px; height: 75px; border-radius: 50%; background: rgba(255,255,255,.74); box-shadow: 0 0 30px rgba(255,255,255,.6); }
.hero-mountain { position: absolute; width: 180px; height: 130px; bottom: -75px; border-radius: 45%; background: color-mix(in srgb, var(--accent) 23%, white); }
.hero-mountain.one { left: -20px; transform: rotate(-20deg); }.hero-mountain.two { right: -18px; transform: rotate(20deg); }
.hero-leaf { position: absolute; left: 47%; top: 35px; color: white; font-size: 2rem; }
.section-head { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; margin-bottom: 10px; }
.section-head h2 { font-size: .95rem; }
.section-head small { color: var(--muted); font-size: .68rem; }
.switcher { margin: 0 0 20px; }
.segmented { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.segmented button { display: flex; align-items: center; gap: 8px; min-height: 55px; border: 1px solid var(--line); border-radius: 16px; background: var(--paper); color: var(--ink); padding: 7px 10px; font-weight: 750; }
.segmented button[aria-pressed="true"] { border-color: var(--accent); background: var(--accent-soft); }
.segmented small { color: var(--muted); font-weight: 400; margin-left: auto; }
.avatar { display: grid; place-items: center; flex: none; width: 32px; height: 32px; border-radius: 50%; background: var(--secondary); color: var(--accent-strong); font-size: .84rem; }
.switcher .hint { margin: 9px 2px 0; font-size: .73rem; }
.stage-list { display: grid; grid-template-columns: repeat(4, 1fr); gap: 7px; }
.stage-list button { border: 1px solid var(--line); border-radius: 100px; padding: 8px 2px; background: var(--paper); color: var(--muted); font-size: .78rem; }
.stage-list button[aria-pressed="true"] { background: var(--accent); color: white; border-color: var(--accent); font-weight: 700; }
.feature-grid { display: grid; gap: 12px; }
.feature { display: grid; gap: 10px; border-radius: 22px; padding: 18px; border: 1px solid var(--line); background: var(--paper); box-shadow: var(--shadow); }
.feature-main { background: linear-gradient(140deg, var(--paper), var(--accent-soft)); }
.feature-memory { background: linear-gradient(140deg, var(--paper), var(--secondary)); }
.feature-symbol { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 15px; color: var(--accent); background: rgba(255,255,255,.73); font-size: 1.3rem; }
.feature small { color: var(--accent-strong); font-weight: 700; }
.feature h2 { margin: 4px 0 3px; }
.feature p { color: var(--muted); font-size: .79rem; line-height: 1.55; margin: 0; }
.feature .btn { justify-self: start; margin-top: 2px; min-height: 44px; padding: 8px 15px; font-size: .85rem; }
.middle-challenge { background: var(--paper); border: 1px solid var(--line); border-radius: 20px; padding: 16px; margin: 0 0 17px; box-shadow: var(--shadow); }
.middle-challenge > div:first-child { display: flex; align-items: center; gap: 10px; }
.middle-challenge > div:first-child span:last-child { display: grid; gap: 2px; }
.middle-challenge small { color: var(--accent-strong); font-size: .72rem; font-weight: 700; }
.challenge-star { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 13px; background: var(--secondary); color: var(--accent); font-size: 1.4rem; }
.middle-challenge p { color: var(--muted); font-size: .78rem; margin: 8px 0 12px; }
.middle-challenge > div:last-child, .high-balance > div:last-child { display: flex; gap: 7px; }
.middle-challenge .btn, .high-balance .btn { min-height: 44px; padding: 8px 11px; font-size: .81rem; }
.high-balance { border-radius: 22px; background: linear-gradient(140deg, var(--paper), var(--secondary)); border: 1px solid var(--line); padding: 17px; margin-bottom: 17px; }
.high-balance > div:first-child { display: flex; gap: 10px; align-items: center; }.high-balance > div:first-child span { color: #e9ad4f; font-size: 1.8rem; }.high-balance p { color: var(--muted); font-size: .78rem; margin: 6px 0 12px; }
.college-board { margin-bottom: 18px; }.board-columns { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; }.board-columns button { display: grid; gap: 8px; align-content: start; min-height: 135px; text-align: left; color: var(--ink); background: var(--paper); border: 1px solid var(--line); border-top: 4px solid var(--accent); border-radius: 16px; padding: 13px; box-shadow: var(--shadow); }.board-columns small { color: var(--muted); }.board-columns b { font-size: .83rem; line-height: 1.45; }.board-columns span { color: var(--accent); font-size: .74rem; font-weight: 750; align-self: end; }
.elder-actions { display: grid; gap: 13px; margin-bottom: 22px; }.elder-actions h2 { font-size: 1.2rem; }.elder-actions .btn { min-height: 68px; font-size: .97rem; }.elder-actions p { color: var(--muted); font-size: .83rem; margin: 0; }
.elder-switch { border-top: 1px solid var(--line); padding-top: 20px; }
.demo-states { display: flex; justify-content: center; align-items: center; gap: 8px; margin: 24px 0 0; color: var(--muted); font-size: .875rem; }.demo-states .btn { min-height: 44px; padding: 8px 12px; font-size: .875rem; }
.inline-note { display: grid; gap: 4px; margin: 18px 0 0; border-left: 3px solid var(--accent); padding: 3px 0 3px 12px; font-size: .77rem; }
.inline-note span { color: var(--muted); line-height: 1.5; }.inline-note .btn { justify-self: start; min-height: 44px; padding: 8px 12px; font-size: .875rem; }
.step { color: var(--accent-strong); font-weight: 800; letter-spacing: .04em; margin: 4px 0 12px; font-size: .77rem; }
.step span { display: inline-block; width: 48px; height: 2px; vertical-align: middle; background: var(--accent); margin: 0 8px; }
.form-card { display: grid; gap: 25px; padding: 21px; }
.field { font-size: .87rem; }
.field .hint { font-weight: 400; }
.stage-summary { display: flex; gap: 9px; align-items: center; color: var(--ink); background: var(--accent-soft); border-radius: 14px; padding: 12px; }
.stage-summary .icon { font-size: 1.5rem; color: var(--accent); }.stage-summary small { color: var(--muted); font-weight: 400; font-size: .7rem; margin-left: auto; text-align: right; max-width: 130px; }
.privacy-callout { border-radius: 16px; background: var(--accent-soft); padding: 13px 15px; font-size: .78rem; line-height: 1.5; }
.privacy-callout p { color: var(--muted); margin: 4px 0 0; }
.profile-settings-entry { display: grid; grid-template-columns: 42px 1fr auto; align-items: center; gap: 12px; width: 100%; margin-top: 12px; padding: 14px 15px; border: 1px solid var(--line); border-radius: 18px; color: var(--ink); background: var(--paper); text-align: left; box-shadow: var(--shadow); }
.profile-settings-entry:hover { border-color: var(--accent); transform: translateY(-1px); }
.profile-settings-entry > span:nth-child(2) { display: grid; gap: 3px; }
.profile-settings-entry small { color: var(--muted); line-height: 1.45; }
.profile-settings-entry > b { color: var(--accent); font-size: 1.45rem; }
.profile-settings-icon,.settings-item-icon { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 13px; color: var(--accent-strong); background: var(--accent-soft); font-size: 1.05rem; font-weight: 850; }
.settings-intro { margin-bottom: 20px; }
.settings-intro > span { color: var(--accent-strong); font-size: .875rem; font-weight: 800; letter-spacing: .04em; }
.settings-intro p { margin: 0; color: var(--ink); font-size: .875rem; line-height: 1.5; }
.settings-list { display: grid; gap: 10px; }
.settings-list > h2 { margin: 12px 2px 2px; color: var(--accent-strong); font-family: inherit; font-size: 1rem; line-height: 1.4; }
.settings-list > h2:first-child { margin-top: 0; }
.settings-list > .settings-danger { margin-top: 7px; border-color: #eed6d3; background: #fffafa; }
.settings-list > .settings-danger .settings-item-icon { color: #a44942; background: #fff0ee; }
.settings-list > button { display: grid; grid-template-columns: 42px 1fr auto; align-items: center; gap: 12px; width: 100%; min-height: 72px; padding: 13px 14px; border: 1px solid var(--line); border-radius: 18px; color: var(--ink); background: var(--paper); text-align: left; box-shadow: var(--shadow); }
.settings-list > button:hover { border-color: var(--accent); transform: translateY(-1px); }
.settings-list > button:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; }
.settings-list > button > span:nth-child(2) { display: grid; gap: 4px; }
.settings-list strong { font-size: .9rem; }
.settings-list small { color: var(--muted); font-size: .875rem; line-height: 1.45; }
.settings-list > button > b { color: var(--accent); font-size: 1.5rem; }
.action-stack { display: grid; gap: 9px; margin-top: 22px; }.action-stack.compact { margin-top: 13px; }
.profile-action-note { margin-top: 16px; padding: 15px 17px; border-radius: 16px; background: var(--accent-soft); color: var(--ink); }.profile-action-note strong { font-size: .86rem; }.profile-action-note p { margin: 5px 0 0; color: var(--muted); font-size: .79rem; }
.profile-overview .step,.profile-overview .lede,.profile-overview .field,.profile-overview .privacy-callout,.profile-overview .profile-action-note { font-size: .875rem; }
.profile-overview .lede,.profile-overview .privacy-callout p,.profile-overview .profile-action-note p { color: var(--ink); }
.profile-overview .stage-summary { display: grid; grid-template-columns: 24px minmax(0,1fr); gap: 2px 10px; }
.profile-overview .stage-summary .icon { grid-row: 1 / 3; }
.profile-overview .stage-summary b,.profile-overview .stage-summary small { grid-column: 2; }
.profile-overview .stage-summary small { max-width: none; margin: 0; color: var(--ink); font-size: .875rem; text-align: left; line-height: 1.45; }
.profile-overview .memory-media-entry strong { font-family: "Noto Sans SC", "Microsoft YaHei", sans-serif; font-size: 1rem; }
.profile-overview .memory-media-entry small,.profile-overview .profile-settings-entry small { color: var(--ink); font-size: .875rem; }
.profile-overview .profile-action-note strong,.profile-overview .profile-action-note p { font-size: .875rem; }
.conversation { display: grid; gap: 15px; margin: 14px 0 22px; }
.assistant-bubble { display: flex; align-items: flex-start; gap: 10px; }.assistant-bubble p { background: var(--paper); border-radius: 4px 17px 17px 17px; border: 1px solid var(--line); padding: 15px; margin: 0; box-shadow: var(--shadow); font-weight: 700; }
.mini-mark { display: grid; place-items: center; flex: none; width: 34px; height: 34px; border-radius: 12px; color: white; background: var(--accent); font-size: .75rem; }
.answer-guide { justify-self: end; max-width: 85%; padding: 14px 15px; border-radius: 17px 4px 17px 17px; background: var(--accent-soft); font-size: .8rem; }.answer-guide p { margin: 4px 0 0; color: var(--muted); }
.quote-card { background: var(--secondary); border-radius: 18px; padding: 16px; margin: 14px 0; }.quote-card span { color: var(--muted); font-size: .75rem; }.quote-card p { margin: 7px 0 0; font-family: "Noto Serif SC", "Songti SC", SimSun, serif; font-size: 1.04rem; font-weight: 650; }
.goal-options { display: grid; gap: 11px; margin: 17px 0; }
.goal-sample-label { margin-top: 20px; color: var(--accent-strong); font-size: .82rem; font-weight: 800; }
.goal-card { position: relative; display: grid; gap: 7px; width: 100%; text-align: left; color: var(--ink); background: var(--paper); border: 1px solid var(--line); border-radius: 19px; padding: 17px 18px 15px 45px; }
.goal-card[aria-pressed="true"] { border-color: var(--accent); background: var(--accent-soft); }.goal-card .radio { position: absolute; left: 16px; top: 19px; }.goal-card strong { font-size: .94rem; }.goal-card small { color: var(--accent-strong); font-weight: 700; }.goal-card p { color: var(--muted); font-size: .75rem; margin: 0; }
.radio { display: inline-block; flex: none; width: 17px; height: 17px; border: 1.5px solid var(--muted); border-radius: 50%; background: var(--paper); }
[aria-pressed="true"] > .radio { border: 5px solid var(--accent); }
.plan-head { display: flex; align-items: center; padding: 16px; min-height: 135px; background: linear-gradient(125deg, var(--paper), var(--accent-soft)); }.plan-head h2 { margin: 9px 0 4px; }.plan-head p { color: var(--muted); font-size: .75rem; margin: 0; }.plan-illustration { font-size: 4.3rem; color: var(--accent); opacity: .45; line-height: 1; }
.plan-example { margin: 18px 0; padding: 18px; background: var(--paper); }.plan-example h2 { margin: 12px 0 6px; }.plan-example p { margin: 0; color: var(--muted); font-size: .875rem; }
section[data-page-id="P025-031"].plan-screen { padding: 18px 23px 42px; color: var(--ink); background: var(--bg); font-family: inherit; }
.timeline { margin: 18px 0; display: grid; gap: 0; }.day-row { display: grid; grid-template-columns: 48px 1fr; gap: 10px; padding: 0 0 15px; }.day-row time { color: var(--accent-strong); font-weight: 800; font-size: .79rem; padding-top: 14px; }.task-card { display: flex; gap: 11px; align-items: center; border: 1px solid var(--line); background: var(--paper); border-radius: 17px; padding: 13px; }.task-card b { font-size: .83rem; line-height: 1.45; }.task-card small { display: block; color: var(--muted); margin-top: 3px; font-size: .71rem; }.task-icon { display: grid; place-items: center; flex: none; width: 34px; height: 34px; border-radius: 12px; background: var(--accent-soft); color: var(--accent); font-size: 1.2rem; }
.detail-strip { padding: 18px; border-radius: 20px; background: var(--secondary); }.detail-strip p { color: var(--muted); font-size: .82rem; }.detail-strip .btn { font-size: .84rem; }
.task-focus { padding: 20px; background: linear-gradient(130deg, var(--paper), var(--accent-soft)); margin: 10px 0 18px; }.task-focus h2 { margin: 12px 0 4px; }.task-focus p { color: var(--muted); margin: 0; font-size: .8rem; }
.choice-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin: 0 0 20px; }.choice-grid .choice { text-align: center; min-height: 70px; padding: 8px; font-size: .76rem; font-weight: 750; }
.choice-grid .choice { display: flex; align-items: center; justify-content: center; gap: 6px; border: 1px solid var(--line); border-radius: 16px; background: var(--paper); color: var(--ink); transition: background .16s ease, border-color .16s ease, box-shadow .16s ease; }
.choice-grid .choice[aria-pressed="true"] { border-color: var(--accent); background: var(--accent-soft); color: var(--accent-strong); box-shadow: inset 0 0 0 1px var(--accent); }
.choice-grid .choice:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; }
.feedback-choice-result { margin: -7px 0 19px; padding: 13px 15px; border: 1px solid var(--line); border-radius: 16px; background: var(--paper); color: var(--ink); }
.feedback-choice-result strong { display: block; font-size: .87rem; }
.feedback-choice-result p { margin: 6px 0; font-size: max(14px,.875rem); line-height: 1.55; }
.feedback-choice-result small { display: block; color: var(--ui-text-subtle); font-size: max(14px,.875rem); line-height: 1.5; }
.success-receipt { background: #e7f3e7; border: 1px solid #b8d5b7; border-radius: 18px; padding: 15px; margin-top: 18px; font-size: .83rem; }.success-receipt p { margin: 5px 0 12px; }.success-receipt > div { display: flex; gap: 6px; }.success-receipt .btn { flex: 1; min-height: 40px; font-size: .76rem; padding: 6px; }
section[data-page-id="P073"].memory-screen { display: block; padding: 18px 23px 42px; color: var(--ink); background: var(--bg); font-family: inherit; }
.memory-preview-entry { background: var(--paper); border-style: dashed; box-shadow: none; }.memory-preview-entry .btn { min-height: 44px; }
.memory-tabs { display: flex; gap: 24px; border-bottom: 1px solid var(--line); margin: 17px 0; color: var(--muted); font-weight: 700; font-size: .82rem; }.memory-tabs > span { padding-bottom: 10px; }.memory-tabs .active { color: var(--accent-strong); border-bottom: 3px solid var(--accent); }.memory-tabs small { font-size: .62rem; font-weight: 400; }
.empty-story { text-align: center; padding: 20px 10px 25px; }.empty-symbol { font-size: 3.5rem; color: var(--accent); }.empty-story h2 { font-size: 1.04rem; }.empty-story p { color: var(--muted); font-size: .78rem; }.empty-story .btn { font-size: .8rem; min-height: 42px; }
.memory-media-entry { display: grid; grid-template-columns: 72px minmax(0,1fr) auto; align-items: center; gap: 13px; width: 100%; min-height: 96px; margin: 16px 0; padding: 13px 15px; border: 1px solid color-mix(in srgb,var(--accent) 28%,var(--line)); border-radius: 21px; color: var(--ink); text-align: left; background: linear-gradient(135deg,#fff 40%,color-mix(in srgb,var(--accent-soft) 68%,#fff)); box-shadow: 0 10px 28px color-mix(in srgb,var(--accent) 10%,transparent); }
.memory-media-entry > span:nth-child(2) { display: grid; gap: 3px; min-width: 0; }.memory-media-entry strong { font-family: var(--font-ui); font-size: .92rem; line-height: 1.45; }.memory-media-entry small { color: var(--muted); font-size: .65rem; }.memory-media-entry > b { color: var(--accent-strong); font-size: 1.45rem; }
.memory-media-entry-art { position: relative; display: block; width: 66px; height: 66px; border-radius: 19px; background: linear-gradient(145deg,#f6ebff,#e9f8f0 56%,#fff3d8); }
.memory-media-entry-art i,.memory-media-entry-art b,.memory-media-entry-art em { position: absolute; display: grid; place-items: center; width: 29px; height: 29px; border-radius: 10px; color: #fff; font-size: .61rem; font-style: normal; box-shadow: 0 5px 12px rgba(70,52,112,.12); }
.memory-media-entry-art i { left: 8px; bottom: 8px; background: #8f76dc; }.memory-media-entry-art b { top: 7px; right: 8px; background: #68aa91; }.memory-media-entry-art em { right: 6px; bottom: 5px; width: 23px; height: 23px; background: #edae68; }
.memory-feature-art { display:block; flex:none; width:68px; height:68px; border-radius:18px; background-image:url('/apps/consumer/assets/k12-dream/memory-feature-icons.webp'); background-repeat:no-repeat; background-size:200% 200%; background-color:#fff9f0; box-shadow:0 7px 17px #755b3520; }
.memory-feature-timeline { background-position:left top; }
.memory-feature-capsule { background-position:right top; }
.memory-feature-media { background-position:left bottom; }
.memory-feature-avatar { background-position:right bottom; }



/* P073-MEDIA: browser preview of the miniprogram media flow. All state remains ephemeral. */
.memory-media-screen { min-width: 0; overflow-wrap: anywhere; padding-bottom: 34px; background: radial-gradient(circle at 92% 1%,color-mix(in srgb,var(--accent-soft) 65%,transparent) 0 95px,transparent 96px),var(--bg); }
.memory-media-intro { position: relative; padding: 5px 2px 17px; }.memory-media-intro > span { color: var(--accent-strong); font-size: .7rem; font-weight: 850; letter-spacing: .05em; }.memory-media-intro h1 { margin: 7px 0 8px; }.memory-media-intro p { max-width: 360px; margin: 0; color: var(--muted); font-size: .76rem; }
.memory-media-privacy { display: flex; gap: 11px; align-items: flex-start; padding: 13px 14px; margin-bottom: 14px; border: 1px solid #d9e9e1; border-radius: 16px; background: linear-gradient(120deg,#eff9f3,#fffdfa); }
.memory-media-privacy > span { display: grid; place-items: center; flex: none; width: 32px; height: 32px; border-radius: 11px; color: #397b67; background: #dcefe6; font-weight: 900; }.memory-media-privacy b { color: #326d5b; font-size: .75rem; }.memory-media-privacy p { margin: 4px 0 0; color: #64766f; font-size: .66rem; line-height: 1.55; }
.memory-media-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 9px; }
.memory-media-grid button { display: grid; grid-template-columns: 39px minmax(0,1fr); align-items: center; gap: 1px 9px; min-width: 0; min-height: 83px; padding: 11px; border: 1px solid var(--line); border-radius: 17px; color: var(--ink); text-align: left; background: rgba(255,255,255,.88); }
.memory-media-grid button > span { grid-row: 1 / 3; display: grid; place-items: center; width: 39px; height: 39px; border-radius: 13px; color: #6d58b9; background: #efeaff; font-size: 1.1rem; }.memory-media-grid button:nth-child(2) > span { color: #87703e; background: #fff0d0; }.memory-media-grid b { font-size: .75rem; }.memory-media-grid small { color: var(--muted); font-size: .61rem; line-height: 1.35; }
.memory-media-grid button[aria-pressed="true"] { border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent-soft); }
.memory-media-voice-primary { display: grid; grid-template-columns: 52px minmax(0,1fr) auto; align-items: center; gap: 12px; width: 100%; min-height: 78px; margin: 10px 0 14px; padding: 11px 15px; border: 0; border-radius: 24px; color: #fff; text-align: left; background: linear-gradient(135deg,#9b78ec 0%,#7252d2 53%,#5ca5c7 100%); box-shadow: 0 13px 30px rgba(111,79,205,.25); }
.memory-media-voice-primary[aria-pressed="true"] { box-shadow: 0 0 0 3px #fff,0 0 0 6px color-mix(in srgb,var(--accent) 50%,transparent),0 13px 30px rgba(111,79,205,.25); }.memory-media-voice-primary > span:nth-child(2) { display: grid; gap: 3px; min-width: 0; }.memory-media-voice-primary strong { font-size: .86rem; line-height: 1.4; }.memory-media-voice-primary small { color: rgba(255,255,255,.79); font-size: .63rem; }.memory-media-voice-primary > b { font-size: 1.35rem; }
.memory-media-mic { display: grid; place-items: center; width: 50px; height: 50px; border-radius: 50%; color: #7654d4; background: #fff; box-shadow: inset 0 0 0 1px rgba(255,255,255,.9),0 6px 17px rgba(54,37,110,.18); }.memory-media-mic svg { width: 25px; height: 25px; }
.memory-media-stage { min-width: 0; padding: 15px; border: 1px solid var(--line); border-radius: 19px; background: rgba(255,255,255,.9); box-shadow: 0 8px 24px rgba(55,47,91,.06); }.memory-media-stage .section-head { margin-bottom: 10px; }.memory-media-stage .section-head h2 { font-size: .9rem; }.memory-media-stage .section-head small { color: var(--muted); font-size: .64rem; }
.memory-media-empty,.memory-media-receipt { min-width: 0; padding: 13px; border-radius: 14px; background: color-mix(in srgb,var(--accent-soft) 48%,#fff); }.memory-media-empty { display: flex; align-items: center; gap: 10px; }.memory-media-empty > span { color: var(--accent); font-size: 1.35rem; }.memory-media-empty > div,.memory-media-receipt { display: grid; gap: 5px; }.memory-media-empty b,.memory-media-receipt b { font-size: .78rem; }.memory-media-empty small,.memory-media-receipt p,.memory-media-short-preview small { margin: 0; color: var(--muted); font-size: .65rem; line-height: 1.5; }.memory-media-receipt > span { color: var(--accent-strong); font-size: .63rem; font-weight: 850; }.memory-media-receipt .btn { justify-self: start; min-height: 42px; padding: 7px 11px; font-size: .68rem; }
.memory-media-receipt.is-failed { color: #7d3e3d; background: #fff0ef; }.memory-media-receipt.is-deleted { background: #f1f2f5; }.memory-media-receipt.is-revoked { background: #fff7e5; }
.memory-media-progress { height: 7px; margin: 3px 0; overflow: hidden; border-radius: 999px; background: #e9e5f1; }.memory-media-progress i { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg,var(--accent),#68af97); transition: width .25s ease; }
.memory-media-inline { display: flex; flex-wrap: wrap; gap: 7px; }.memory-media-short-preview { display: grid; grid-template-columns: auto 1fr; gap: 3px 10px; align-items: center; margin-top: 5px; padding: 11px; border: 1px solid color-mix(in srgb,var(--accent) 22%,var(--line)); border-radius: 13px; background: rgba(255,255,255,.86); }.memory-media-short-preview > span { grid-row: 1 / 3; padding: 8px 10px; border-radius: 10px; color: var(--accent-strong); background: var(--accent-soft); font-size: .66rem; font-weight: 800; }.memory-media-short-preview b { font-size: .72rem; }
.memory-media-boundary { margin-top: 11px; padding: 11px 13px; border: 1px dashed var(--line); border-radius: 13px; background: rgba(255,255,255,.55); }.memory-media-boundary summary { cursor: pointer; color: var(--accent-strong); font-size: .68rem; font-weight: 800; }.memory-media-boundary p { margin: 8px 0 0; color: var(--muted); font-size: .65rem; line-height: 1.55; }
@media (max-width: 440px) { .memory-media-grid { gap: 7px; }.memory-media-grid button { padding: 9px; }.memory-media-voice-primary { border-radius: 21px; }.memory-media-inline .btn { flex: 1; min-width: 84px; } }
@media (max-width: 370px) { .memory-media-grid { grid-template-columns: 1fr; }.memory-media-grid button { min-height: 68px; }.memory-media-voice-primary { grid-template-columns: 46px minmax(0,1fr) auto; padding-left: 11px; padding-right: 11px; }.memory-media-mic { width: 44px; height: 44px; } }
@media (min-width: 831px) { .memory-media-screen { min-height: 100%; }.memory-media-entry:hover,.memory-media-grid button:hover,.memory-media-voice-primary:hover { transform: translateY(-1px); } }

/* P073-MEDIA: make permissions, demo state and recovery actions readable. */
.memory-media-screen .memory-media-intro > span,
.memory-media-screen .memory-media-intro p,
.memory-media-screen .memory-media-privacy b,
.memory-media-screen .memory-media-privacy p,
.memory-media-screen .memory-media-grid b,
.memory-media-screen .memory-media-grid small,
.memory-media-screen .memory-media-voice-primary small,
.memory-media-screen .memory-media-stage .section-head small,
.memory-media-screen .memory-media-empty b,
.memory-media-screen .memory-media-empty small,
.memory-media-screen .memory-media-receipt > span,
.memory-media-screen .memory-media-receipt b,
.memory-media-screen .memory-media-receipt p,
.memory-media-screen .memory-media-receipt small,
.memory-media-screen .memory-media-receipt .btn,
.memory-media-screen .memory-media-short-preview > span,
.memory-media-screen .memory-media-short-preview b,
.memory-media-screen .memory-media-boundary summary,
.memory-media-screen .memory-media-boundary p { font-size: .875rem; line-height: 1.5; }
.memory-media-screen .memory-media-grid button { min-height: 106px; }
.memory-media-screen .memory-media-voice-primary { min-height: 88px; }
.memory-media-screen .memory-media-voice-primary strong { font-size: 1rem; }
.memory-media-screen .memory-media-voice-primary small { color: #fff; }
.memory-media-screen .memory-media-stage .section-head h2 { font-size: 1rem; }
.memory-media-screen .memory-media-receipt .btn { min-height: 44px; }
.memory-media-screen .memory-media-boundary summary { display: flex; align-items: center; min-height: 44px; }
.memory-media-screen .memory-media-diagnostics { margin-top: 3px; }
.memory-media-screen .memory-media-diagnostics summary { display: flex; align-items: center; min-height: 44px; color: var(--ink); font-size: .875rem; cursor: pointer; }
.memory-media-screen .memory-media-diagnostics small { display: block; overflow-wrap: anywhere; }
@media (max-width: 400px) {
  .memory-media-screen .memory-media-grid { grid-template-columns: 1fr; }
  .memory-media-screen .memory-media-grid button { min-height: 78px; }
}
.paper { background: var(--paper); border: 1px solid var(--line); border-radius: 18px; box-shadow: var(--shadow); padding: 22px; min-height: 340px; display: flex; flex-direction: column; }.paper-date { color: var(--muted); border-bottom: 1px solid var(--line); padding-bottom: 13px; margin-bottom: 22px; font-size: .78rem; }.paper .field { flex: 1; }.paper textarea.input { min-height: 175px; border: 0; padding: 10px 0; font-size: 1rem; line-height: 1.7; }.paper-footer { color: var(--accent); text-align: right; font-size: .75rem; }
.memory-compose .step,.memory-compose .paper-date,.memory-compose .paper-footer,.memory-compose .paper .field { font-size: .875rem; line-height: 1.5; }
.memory-compose .paper-date { color: var(--ink); }
.memory-compose .paper-footer { color: var(--accent-strong); }
.preview-paper { padding: 17px; margin: 14px 0 20px; }.preview-paper p { font-family: "Noto Serif SC", "Songti SC", SimSun, serif; font-size: 1.04rem; min-height: 68px; margin: 12px 0; white-space: pre-wrap; overflow-wrap: anywhere; }.preview-paper small { color: var(--muted); }
.audience-list { display: grid; gap: 10px; margin-bottom: 17px; }.audience-option { display: flex; align-items: center; gap: 11px; width: 100%; text-align: left; padding: 14px; border: 1px solid var(--line); border-radius: 16px; background: var(--paper); color: var(--ink); }.audience-option[aria-pressed="true"] { border-color: var(--accent); background: var(--accent-soft); }.audience-glyph { display: grid; place-items: center; flex: none; width: 36px; height: 36px; border-radius: 12px; background: var(--secondary); color: var(--accent); font-size: 1.2rem; }.audience-option span:nth-child(2) { display: grid; gap: 3px; flex: 1; }.audience-option small { color: var(--muted); font-size: .73rem; }
.memory-share .step,.memory-share .preview-paper .tag,.memory-share .preview-paper small,.memory-share .audience-option small,.memory-share .privacy-callout,.memory-share .api-status,.memory-share .api-status small,.memory-share .memory-share-unavailable,.memory-share .memory-share-save-note { font-size: .875rem; line-height: 1.5; }
.memory-share .preview-paper p { min-height: 0; }
.memory-share .audience-option small,.memory-share .preview-paper small,.memory-share .privacy-callout p,.memory-share .api-status span,.memory-share .api-status small { color: var(--ink); }
.memory-share .audience-option.is-locked { border-color: var(--accent); background: var(--accent-soft); }
.memory-share .audience-option.is-locked > strong { color: var(--accent-strong); font-size: .875rem; white-space: nowrap; }
.memory-share .memory-share-unavailable { margin: 0; padding: 12px 14px; border: 1px dashed var(--line); border-radius: 14px; color: var(--ink); background: var(--paper); }
.memory-share .memory-share-save-note { margin: 0; color: var(--ink); }
.memory-share .action-stack .btn:disabled { border: 1px solid var(--line); color: var(--ink); background: color-mix(in srgb,var(--ink) 8%,var(--paper)); box-shadow: none; cursor: not-allowed; }
.family-screen h1 { font-size: 1.8rem; }.family-members { display: grid; gap: 12px; margin: 18px 0; }.member-card { display: flex; gap: 13px; align-items: center; width: 100%; text-align: left; padding: 14px; color: var(--ink); }.member-card .avatar { width: 42px; height: 42px; }.member-card span:nth-child(2) { display: grid; gap: 4px; flex: 1; }.member-card small { color: var(--muted); font-size: .72rem; }.member-card > span:last-child { color: var(--accent); font-size: 1.2rem; }.family-boundary { display: flex; gap: 14px; padding: 17px; background: var(--accent-soft); }.boundary-icon { color: var(--accent); font-size: 2rem; }.family-boundary p { margin: 6px 0 0; color: var(--muted); font-size: .78rem; }
.state-screen { text-align: center; padding-top: 65px; }.state-icon { display: grid; place-items: center; width: 90px; height: 90px; margin: 0 auto 20px; border-radius: 50%; background: var(--accent-soft); color: var(--accent); font-size: 3rem; }.error-symbol { color: #b44e3b; background: #fff0e8; }.state-screen p { color: var(--muted); font-size: .84rem; }
.bottom-nav { flex: none; display: grid; grid-template-columns: repeat(5, 1fr); min-height: 68px; border-top: 1px solid var(--ui-border); background: var(--ui-surface); padding-bottom: env(safe-area-inset-bottom); }.bottom-nav.bottom-nav-four { grid-template-columns: repeat(4, 1fr); }.bottom-nav.bottom-nav-six { grid-template-columns: repeat(6, minmax(0, 1fr)); } .bottom-nav.bottom-nav-seven { grid-template-columns: repeat(7, minmax(0, 1fr)); }.bottom-nav button { display: grid; justify-items: center; align-content: center; gap: 1px; min-height: 44px; border: 0; background: transparent; color: var(--ui-text-subtle); font-size: 1.18rem; }.bottom-nav button span { font-size: .875rem; }.bottom-nav button[aria-current="page"] { color: var(--ui-brand); font-weight: 800; }
.bottom-nav button svg { display: block; }
/* The shared navigation owns the fixed tab bar on every planning page. */
.goal-plan-shell .gp-bottom-nav { display: none; }
[data-stage="elder"] .bottom-nav { min-height: 76px; }[data-stage="elder"] .bottom-nav button svg { width: 25px; height: 25px; }
.toast { position: absolute; z-index: 20; left: 18px; right: 18px; bottom: 79px; display: flex; justify-content: space-between; align-items: center; gap: 10px; background: var(--ink); color: #fff; padding: 12px 14px; border-radius: 12px; box-shadow: var(--shadow); font-size: .875rem; line-height: 1.5; pointer-events: none; }.toast button { display: grid; place-items: center; flex: none; min-width: 44px; min-height: 44px; padding: 0; border: 0; background: none; color: #fff; font-size: 1.25rem; pointer-events: auto; }
.api-status { display: grid; gap: 3px; margin: 12px 0 16px; padding: 11px 13px; border-radius: 13px; border: 1px solid var(--line); background: var(--paper); color: var(--ink); font-size: .76rem; overflow-wrap: anywhere; }
.api-status b { color: var(--accent-strong); }.api-status span { color: var(--muted); }.api-status small { color: var(--muted); font-size: .65rem; }
.audience-option:disabled { opacity: .52; cursor: not-allowed; }
.modal-backdrop { position: absolute; z-index: 30; inset: 0; display: grid; place-items: end center; background: rgba(24, 24, 40, .45); padding: 15px; }.modal { width: 100%; padding: 22px; margin-bottom: 70px; }.modal h2 { font-size: 1.15rem; margin: 0; }.modal p { color: var(--muted); line-height: 1.6; font-size: .85rem; }.modal-actions { display: flex; gap: 8px; }.modal-actions .btn { flex: 1; font-size: .77rem; padding: 8px; }
.memory-leave-modal p { font-size: .875rem; }
.modal-actions.is-memory { display: grid; }
.modal-actions.is-memory .btn { min-height: 44px; font-size: .875rem; }
/* Guarded navigation decisions must remain readable when the preview uses a small base font. */
.modal p { color: var(--ui-text-subtle); font-size: max(14px, .875rem); }
.modal-actions .btn { min-height: 44px; font-size: max(14px, .875rem); line-height: 1.35; white-space: normal; }
[data-stage="elder"] .screen { padding-left: 23px; padding-right: 23px; }[data-stage="elder"] .screen h1 { font-size: var(--ui-type-display, 1.75rem); }[data-stage="elder"] .feature-grid { gap: 17px; }[data-stage="elder"] .feature { min-height: 205px; }[data-stage="elder"] .feature p, [data-stage="elder"] .lede { font-size: .88rem; }[data-stage="elder"] .bottom-nav button span { font-size: .75rem; }
@media (max-width: 830px) { .desktop-layout { display: block; width: 100%; padding: 0; }.preview-aside { display: none; }.phone-shell { width: 100%; height: 100dvh; min-height: 0; border: 0; border-radius: 0; box-shadow: none; }.context-mobile { display: none; } }
@media (max-width: 370px) { .topbar { padding: 0 14px; }.brand { font-size: .9rem; }.context span { font-size: .63rem; }.screen { padding-left: 17px; padding-right: 17px; }.welcome-screen { padding-left: 17px; padding-right: 17px; }.welcome-art { margin-left: -17px; margin-right: -17px; }.page-heading small { display: none; } }

/* Four stage-specific homes. The accepted 204-page boards guide structure;
   brighter junior and senior palettes follow the later P08/E07 contract. */
.home-screen { padding: 0 18px 28px; }
.home-screen .stage-hero { height: 190px; margin: 0 -18px 12px; border-radius: 0 0 22px 22px; }
.home-screen .stage-hero-copy { padding: 17px 20px; max-width: 330px; }
.home-screen .stage-hero-copy > span { display: inline-flex; padding: 4px 9px; border-radius: 999px; background: rgba(255,255,255,.79); color: var(--accent-strong); font-size: .68rem; letter-spacing: 0; }
.home-screen .stage-hero-copy h1 { white-space: pre-line; font-family: var(--font-ui); font-size: 1.43rem; line-height: 1.26; font-weight: 850; margin: 9px 0 6px; }
.home-screen .stage-hero-copy p { max-width: 240px; font-size: .73rem; line-height: 1.45; font-weight: 650; color: var(--ink); }
.home-screen .stage-hero::after { background: linear-gradient(90deg, rgba(255,250,242,.96) 0%, rgba(255,250,242,.81) 42%, rgba(255,250,242,.11) 78%); }
.home-screen .stage-hero-middle img { object-position: center 62%; }
.home-screen .stage-hero-high::after { background: linear-gradient(90deg, rgba(247,251,255,.97) 0%, rgba(247,251,255,.82) 43%, rgba(247,251,255,.08) 80%); }
.home-screen .stage-hero-high img { object-position: center 53%; }
.home-screen .stage-hero-college::after { background: linear-gradient(90deg, rgba(247,249,255,.98) 0%, rgba(247,249,255,.83) 45%, rgba(247,249,255,.08) 82%); }
.home-screen .stage-hero-college img { object-position: center 55%; }
.home-screen .stage-hero-elder { height: 234px; }
.home-screen .stage-hero-elder::after { background: linear-gradient(90deg, rgba(255,252,243,.97) 0%, rgba(255,252,243,.85) 48%, rgba(255,252,243,.10) 85%); }
.home-screen .stage-hero-elder img { object-position: center 57%; }
.home-screen .stage-hero-elder .stage-hero-copy h1 { font-family: var(--font-ui); font-size: 1.72rem; }
.home-screen .stage-hero-elder .stage-hero-copy p { font-size: .8rem; }

.compact-switcher { position: relative; display: flex; align-items: center; gap: 6px; min-height: 47px; margin: 0 -18px; padding: 5px 11px; background: var(--paper); border-bottom: 1px solid var(--line); }
.compact-switcher .switcher-label { flex: none; font-weight: 800; color: var(--ink); font-size: .69rem; }
.compact-switcher .stage-list { display: flex; min-width: 0; flex: 1; gap: 4px; overflow-x: auto; scrollbar-width: none; }
.compact-switcher .stage-list::-webkit-scrollbar { display: none; }
.compact-switcher .stage-list button { flex: none; min-height: 30px; border-radius: 8px; padding: 5px 8px; font-size: .69rem; }
.compact-switcher .stage-list button[aria-pressed="true"] { background: var(--accent-soft); color: var(--accent-strong); }
.stage-main-card { padding: 15px 16px 16px; border-radius: 18px; background: var(--paper); border: 1px solid var(--line); box-shadow: 0 7px 21px color-mix(in srgb, var(--accent) 9%, transparent); margin-bottom: 15px; }
.stage-card-heading { display: flex; gap: 11px; align-items: flex-start; }
.stage-symbol { flex: none; display: grid; place-items: center; width: 42px; height: 42px; border-radius: 14px; background: var(--accent-soft); color: var(--accent-strong); font-size: 1.2rem; font-weight: 850; }
.stage-card-heading small { display: block; color: var(--accent-strong); font-size: .69rem; font-weight: 800; }
.stage-card-heading h2 { margin: 2px 0 0; font-size: 1rem; line-height: 1.33; }
.stage-main-card p { margin: 8px 0 11px 53px; color: var(--muted); font-size: .74rem; line-height: 1.45; }
.stage-main-card .btn { min-height: 44px; font-size: .78rem; }
.home-screen .stage-section { margin: 0 0 15px; padding: 14px; border: 1px solid var(--line); border-radius: 17px; background: var(--paper); }
.home-screen .section-head { align-items: center; margin-bottom: 10px; }
.home-screen .section-head h2 { font-size: .92rem; }
.home-screen .section-head small { font-size: .66rem; }
.dimension-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.dimension-grid span { padding: 9px 4px; border-radius: 10px; background: var(--accent-soft); text-align: center; font-size: .69rem; font-weight: 750; white-space: nowrap; }
.home-screen .micro-note { margin: 9px 2px 0; color: var(--muted); font-size: .69rem; }
.middle-actions .stage-action-row { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.middle-actions .btn { min-height: 43px; padding: 6px; font-size: .75rem; }
.private-note { padding: 13px 15px; margin: 0 0 14px; border-radius: 16px; background: var(--accent-soft); }
.private-note strong { font-size: .8rem; }
.private-note p { margin: 4px 0; font-size: .72rem; color: var(--muted); line-height: 1.5; }
.private-note .btn { padding: 4px 0; min-height: 30px; font-size: .73rem; }
.home-middle .stage-main-card { background: linear-gradient(135deg,#fffdf8,#fff2e2); }
.home-high .stage-main-card { background: linear-gradient(135deg,#ffffff,#e9f4ff); }
.high-path-grid { display: grid; grid-template-columns: repeat(2,1fr); gap: 9px; margin: 0 0 15px; }
.high-path-grid button { display: grid; align-content: start; text-align: left; min-height: 102px; padding: 13px; border: 1px solid var(--line); border-radius: 15px; background: var(--paper); color: var(--ink); }
.high-path-grid span { color: var(--accent); font-size: 1.3rem; font-weight: 900; }
.high-path-grid b { font-size: .82rem; }.high-path-grid small { color: var(--muted); font-size: .67rem; }
.high-breath { display: flex; justify-content: space-between; gap: 10px; align-items: center; background: #fff6e8 !important; }
.high-breath h2 { font-size: .9rem; }.high-breath p { margin: 3px 0 0; color: var(--muted); font-size: .7rem; }
.high-breath .btn { flex: none; min-height: 38px; padding: 5px 9px; font-size: .7rem; }
.college-workbench { margin-bottom: 15px; }
.college-start { margin: -5px 0 18px; padding: 16px; border: 1px solid var(--line); border-radius: 20px; background: var(--paper); box-shadow: var(--shadow); }
.college-start span { color: var(--accent-strong); font-size: .875rem; font-weight: 800; }.college-start h2 { margin: 5px 0 13px; font-size: 1.05rem; }
.college-start-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; }.college-start-actions .btn { display: grid; place-items: center; min-height: 48px; padding: 8px 10px; font-size: .875rem; text-align: center; }
.workbench-grid { display: grid; grid-template-columns: repeat(2,1fr); gap: 8px; }
.workbench-grid button { display: grid; justify-items: start; min-height: 99px; text-align: left; padding: 12px 13px; border: 1px solid var(--line); border-radius: 14px; background: linear-gradient(145deg,var(--paper),#f5f6ff); color: var(--ink); }
.workbench-grid .work-icon { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 9px; background: var(--accent-soft); color: var(--accent); font-size: 1.1rem; font-weight: 900; }
.workbench-grid b { font-size: .79rem; }.workbench-grid small { color: var(--muted); font-size: .66rem; }
.project-progress { display: flex; align-items: center; gap: 9px; }
.project-progress > span { color: var(--accent); font-size: 1.16rem; font-weight: 900; }
.project-progress > div { display: grid; flex: 1; gap: 2px; }
.project-progress b { font-size: .78rem; }.project-progress small { color: var(--muted); font-size: .65rem; }
.project-progress .btn { min-height: 33px; padding: 4px; font-size: .71rem; }
.elder-primary-actions { display: grid; gap: 10px; margin-bottom: 14px; }
.elder-primary-actions h2 { font-family: var(--font-ui); font-size: 1.3rem; margin: 1px 0; }
.elder-primary-actions .btn { display: flex; align-items: center; gap: 11px; min-height: 67px; padding: 8px 15px; text-align: left; border-radius: 17px; font-size: .99rem; }
.elder-primary-actions .btn > span:nth-child(2) { display: grid; flex: 1; gap: 2px; }
.elder-primary-actions .btn small { font-size: .68rem; font-weight: 500; }
.elder-primary-actions .btn b { font-size: 1.5rem; font-weight: 400; }
.elder-action-icon { font-size: 1.45rem; }
.btn-elder-gold { background: linear-gradient(120deg,#c99b53,#a97c38); color: #fff; border-color: #ac7c39; }
.btn-elder-green { background: linear-gradient(120deg,#527455,#31593a); color: #fff; border-color: #31593a; }
.elder-reassurance { padding: 13px 15px; background: var(--paper); border: 1px solid var(--line); border-radius: 16px; }
.elder-reassurance strong { font-size: .94rem; }.elder-reassurance p { margin: 4px 0; font-size: .76rem; color: var(--muted); }
.elder-reassurance .btn { padding: 4px 0; font-size: .76rem; }
.home-screen .demo-states { margin-top: 16px; }
.preview-aside h2 { font-size: clamp(2.6rem, 3.5vw, 4rem); margin: 38px 0 17px; line-height: 1.21; }
.preview-aside > p { max-width: 445px; font-size: .93rem; line-height: 1.7; }
.aside-stage-gallery { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 10px; width: min(450px,100%); margin: 25px 0 22px; }
.aside-stage-gallery > div { position: relative; height: 113px; overflow: hidden; border-radius: 14px; background: var(--accent-soft); }
.aside-stage-gallery img { width: 100%; height: 100%; object-fit: cover; object-position: center 60%; }
.aside-stage-gallery > div::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg,rgba(20,27,52,.72),transparent); }
.aside-stage-gallery span { position: absolute; z-index: 1; top: 13px; left: 12px; color: #fff; font-weight: 800; font-size: 1rem; text-shadow: 0 1px 6px rgba(0,0,0,.2); }
.aside-stage-gallery small { display: block; font-size: .7rem; font-weight: 550; margin-top: 3px; }
.preview-aside .aside-foot { margin-top: 12px; font-size: .79rem; }
[data-stage="elder"] .compact-switcher { padding: 6px 9px; }
[data-stage="elder"] .compact-switcher .stage-list button { font-size: .74rem; }
[data-stage="elder"] .home-screen .stage-hero-copy p { font-size: .82rem; }
@media (max-width: 370px) {
  .compact-switcher .switcher-label { display: none; }
  .home-screen .stage-hero { height: 176px; }
  .home-screen .stage-hero-elder { height: 220px; }
  .home-screen .stage-hero-copy h1 { font-size: 1.3rem; }
  .dimension-grid span { font-size: .61rem; }
}
.community-home-link { margin: 16px 0; padding: 17px; border: 1px solid var(--line); border-radius: 19px; background: linear-gradient(135deg,var(--paper),var(--accent-soft)); }
.community-home-link > span,.community-kicker { color: var(--accent-strong); font-size: .73rem; font-weight: 800; }
.community-home-link h2 { margin: 5px 0; font-size: 1.03rem; }.community-home-link p { margin: 0 0 12px; color: var(--muted); font-size: .73rem; }
.community-screen { padding-top: 3px; }.community-hero { margin: 0 -23px 10px; padding: 15px 23px 13px; background: linear-gradient(135deg,var(--accent-soft),var(--paper)); border-radius: 0 0 24px 24px; }
.community-hero > span { color: var(--accent-strong); font-size: .75rem; font-weight: 800; }.community-hero h1 { margin: 4px 0; }.community-hero p { max-width: 290px; margin: 0; color: var(--muted); font-size: .76rem; }
.community-switcher { display: flex; gap: 7px; overflow-x: auto; padding: 1px 0 11px; }.community-switcher button { flex: 0 0 auto; padding: 8px 13px; border: 1px solid var(--line); border-radius: 999px; color: var(--muted); background: var(--paper); font-size: .75rem; font-weight: 750; }.community-switcher button[aria-pressed="true"] { color: var(--accent-strong); background: var(--accent-soft); border-color: var(--accent); }
.community-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 0 0 9px; }.community-actions .btn { padding: 8px; font-size: .76rem; }
.community-screen .api-status { margin: 8px 0; padding: 9px 11px; }
.community-list-heading { display: flex; align-items: center; justify-content: space-between; margin: 10px 0 7px; }.community-list-heading h2 { font-size: .98rem; }.community-list-heading .btn { min-height: 33px; padding: 4px 10px; font-size: .72rem; }
.community-posts { display: grid; gap: 10px; }.community-post-card { display: grid; gap: 7px; width: 100%; padding: 15px; text-align: left; color: var(--ink); background: var(--paper); border: 1px solid var(--line); border-radius: 17px; box-shadow: var(--shadow); }.community-post-card:hover { border-color: var(--accent); }
.community-card-meta { display: flex; justify-content: space-between; gap: 8px; color: var(--accent-strong); font-size: .7rem; }.community-card-meta small { color: var(--muted); }.community-post-card > strong { font-size: .95rem; line-height: 1.4; }.community-excerpt { color: var(--muted); font-size: .77rem; line-height: 1.55; overflow-wrap: anywhere; }.community-state { color: var(--accent-strong); font-size: .69rem; font-weight: 800; }
.community-empty { padding: 26px 16px; text-align: center; background: var(--paper); border: 1px dashed var(--line); border-radius: 16px; }.community-empty b { font-size: .82rem; }.community-empty p { color: var(--muted); font-size: .73rem; }
.community-boundary { color: var(--muted); font-size: .7rem; line-height: 1.55; margin-top: 16px; }.community-compose .field { margin-top: 16px; }.community-compose select.input { width: 100%; }
.community-preview { display: grid; gap: 10px; margin-top: 20px; padding: 17px; border: 1px solid var(--accent); border-radius: 18px; background: var(--paper); }.community-preview > span { color: var(--accent-strong); font-size: .73rem; font-weight: 800; }.community-preview > small { color: var(--muted); }.community-preview h2 { overflow-wrap: anywhere; }.community-preview p { white-space: pre-wrap; overflow-wrap: anywhere; font-size: .82rem; }.community-check { display: flex; gap: 9px; align-items: flex-start; font-size: .76rem; line-height: 1.5; }.community-check input { margin-top: 3px; accent-color: var(--accent); }
.community-detail-body { white-space: pre-wrap; overflow-wrap: anywhere; padding: 20px; margin: 17px 0; min-height: 95px; background: var(--paper); border: 1px solid var(--line); border-radius: 18px; font-size: .88rem; line-height: 1.8; }
[data-stage="middle"] .community-hero { border-radius: 0 0 31px 24px; background: radial-gradient(circle at 91% 13%, var(--visual-2), transparent 32%), linear-gradient(135deg,var(--accent-soft),var(--paper)); }
[data-stage="middle"] .community-post-card { border-radius: 21px; }
[data-stage="high"] .community-hero { border-radius: 0 0 12px 12px; background: linear-gradient(155deg,var(--accent-soft),var(--paper)); }
[data-stage="high"] .community-post-card { border-left: 4px solid var(--accent); border-radius: 12px; }
[data-stage="college"] .community-hero { background: linear-gradient(140deg,var(--accent-soft),var(--paper) 82%); }
[data-stage="college"] .community-post-card { box-shadow: 0 8px 20px color-mix(in srgb,var(--accent) 8%,transparent); }
[data-stage="elder"] .community-hero { border-radius: 0 0 31px 31px; padding-top: 17px; padding-bottom: 16px; }
[data-stage="elder"] .community-hero h1 { font-size: 1.75rem; line-height: 1.35; }
[data-stage="elder"] .community-hero p, [data-stage="elder"] .community-post-card, [data-stage="elder"] .community-empty p { font-size: .87rem; }
[data-stage="elder"] .community-post-card { padding: 19px; line-height: 1.65; }
[data-stage="elder"] .community-actions .btn, [data-stage="elder"] .community-switcher button { min-height: 48px; font-size: max(16px, 1rem); }

.home-screen.home-screen .stage-preview-flag { display: flex; align-items: center; gap: 8px; margin: 10px 0 12px; padding: 8px 10px; border: 1px solid var(--ui-border); border-radius: 10px; background: var(--ui-surface); box-shadow: none; }
.home-screen.home-screen .stage-preview-flag span { flex: none; color: var(--ui-brand); background: none; font-size: 14px; font-weight: 700; }
.home-screen.home-screen .stage-preview-flag p { margin: 0; color: var(--ui-text-subtle); font-size: 14px; line-height: 1.45; }
.home-screen .stage-hero-pregnancy::after { background: linear-gradient(90deg,rgba(255,249,245,.98),rgba(255,249,245,.84) 44%,rgba(255,249,245,.1) 83%); }
.home-screen .stage-hero-infant::after { background: linear-gradient(90deg,rgba(255,249,237,.97),rgba(255,249,237,.8) 43%,rgba(255,249,237,.1) 81%); }
.home-screen .stage-hero-preschool::after { background: linear-gradient(90deg,rgba(246,251,242,.96),rgba(246,251,242,.76) 43%,rgba(246,251,242,.08) 81%); }
.home-screen .stage-hero-primary::after { background: linear-gradient(90deg,rgba(255,249,236,.98),rgba(255,249,236,.8) 44%,rgba(255,249,236,.06) 84%); }
.home-screen .stage-hero-graduate::after { background: linear-gradient(90deg,rgba(247,249,255,.98),rgba(247,249,255,.77) 42%,rgba(247,249,255,.05) 83%); }
.home-screen .stage-hero-young::after { background: linear-gradient(90deg,rgba(246,250,247,.97),rgba(246,250,247,.74) 43%,rgba(246,250,247,.07) 83%); }
.home-screen .stage-hero-midlife::after { background: linear-gradient(90deg,rgba(249,250,244,.98),rgba(249,250,244,.79) 45%,rgba(249,250,244,.08) 85%); }
.home-screen .stage-hero-pregnancy img,.home-screen .stage-hero-infant img,.home-screen .stage-hero-preschool img,.home-screen .stage-hero-primary img,.home-screen .stage-hero-graduate img,.home-screen .stage-hero-young img,.home-screen .stage-hero-midlife img { object-position: center 55%; }
.home-pregnancy .stage-hero-copy h1,.home-midlife .stage-hero-copy h1 { font-family: var(--font-ui); }
.home-preschool .stage-hero { border-radius: 0 0 34px 34px; }
.home-primary .stage-hero { border-radius: 0 0 29px 29px; }
.home-graduate .stage-hero { border-radius: 0 0 11px 11px; }
.home-young .stage-hero { border-radius: 0 0 8px 28px; }
.home-midlife .stage-hero { border-radius: 0 0 20px 20px; }
.pregnancy-timeline,.infant-observe,.preschool-quest,.primary-map,.graduate-focus,.young-priority,.midlife-compass { margin-bottom: 12px; padding: 15px; border: 1px solid var(--line); border-radius: 19px; background: var(--paper); box-shadow: 0 7px 21px color-mix(in srgb,var(--accent) 8%,transparent); }
.pregnancy-timeline { background: linear-gradient(145deg,#fffefa,#fff3f1); }
.pregnancy-timeline .section-head h2 { font-family: var(--font-ui); font-size: 1.02rem; }
.timeline-track { display: grid; gap: 9px; margin: 4px 0 14px; border-left: 2px solid #e6b9bb; padding-left: 10px; }
.timeline-track > div { display: flex; gap: 9px; align-items: center; }
.timeline-track i { display: grid; place-items: center; flex: none; width: 28px; height: 28px; border-radius: 50%; background: #f5dadd; color: #985c6e; font-size: .63rem; font-style: normal; font-weight: 850; }
.timeline-track span,.pregnancy-mini-grid button,.preschool-doors button,.primary-trail button,.graduate-board button,.young-split button { display: grid; gap: 2px; }
.timeline-track b,.pregnancy-mini-grid b { font-size: .78rem; }.timeline-track small,.pregnancy-mini-grid small { color: var(--muted); font-size: .67rem; }
.pregnancy-mini-grid { display: grid; grid-template-columns: repeat(2,1fr); gap: 8px; }
.pregnancy-mini-grid button { min-height: 66px; text-align: left; padding: 11px; border: 1px solid var(--line); border-radius: 14px; color: var(--ink); background: var(--paper); }
.infant-observe { border-radius: 26px 26px 16px 16px; background: #fffdf6; }
.infant-observe .section-head h2 { font-size: 1.05rem; }
.infant-observe .stage-note { margin: 9px 2px 0; color: var(--muted); font-size: .7rem; line-height: 1.5; }
.observe-bubbles { display: flex; justify-content: space-between; gap: 6px; margin: 14px 0; }
.observe-bubbles span { display: grid; justify-items: center; gap: 4px; width: 33%; color: var(--ink); font-size: .73rem; font-weight: 750; }
.observe-bubbles i { display: grid; place-items: center; width: 53px; height: 53px; border-radius: 50%; background: #fff0da; color: #a97140; font-size: 1.5rem; font-style: normal; }
.observe-bubbles span:nth-child(2) i { background: #eaf2df; color: #6f936e; }.observe-bubbles span:nth-child(3) i { background: #f8e7e4; color: #b57875; }
.infant-companion { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 14px; border-radius: 17px; background: #ebf1e4; }
.infant-companion b { font-size: .78rem; }.infant-companion p { margin: 2px 0 0; color: var(--muted); font-size: .66rem; }
.infant-companion .btn { flex: none; font-size: .7rem; padding: 7px; }
.preschool-quest { background: #fbfff7; border: 2px solid #d8ebd0; }
.preschool-doors { display: grid; grid-template-columns: repeat(3,1fr); gap: 7px; }
.preschool-doors button { justify-items: center; min-height: 106px; padding: 9px 5px; text-align: center; background: #fff8df; border: 1px solid #f1dfb8; border-radius: 19px 19px 9px 9px; color: var(--ink); }
.preschool-doors button:nth-child(2) { background: #f6eaf4; border-color: #e5d6e5; }.preschool-doors button:nth-child(3) { background: #e9f4e6; border-color: #d5e5d1; }
.preschool-doors span { font-size: 1.5rem; color: var(--accent-strong); }.preschool-doors b { font-size: .76rem; }.preschool-doors small { color: var(--muted); font-size: .61rem; }
.preschool-remember { position: relative; padding: 15px; border-radius: 17px; background: #fff0d7; }
.preschool-remember > span { color: #987031; font-size: .67rem; font-weight: 850; }.preschool-remember h2 { margin: 4px 0 !important; font-size: .93rem !important; }.preschool-remember p { margin: 2px 0 5px; font-size: .68rem; color: var(--muted); }
.primary-map { background: #fffdf7; border-color: #eddbb7; }
.primary-trail { display: grid; gap: 7px; margin: 5px 0; }
.primary-trail button { display: flex; align-items: center; gap: 9px; min-height: 55px; text-align: left; padding: 6px 11px; background: #fff4dd; border: 1px solid #f3e3c4; border-radius: 13px; color: var(--ink); }
.primary-trail button:nth-child(2) { background: #e9f1dc; border-color: #d8e8cb; }.primary-trail button:nth-child(3) { background: #e9f1f6; border-color: #d7e7ee; }
.primary-trail i { display: grid; place-items: center; flex: none; width: 33px; height: 33px; border-radius: 11px; background: #edc677; color: #724f23; font-size: .66rem; font-style: normal; font-weight: 900; }
.primary-trail button:nth-child(2) i { background: #b7d28b; }.primary-trail button:nth-child(3) i { background: #afcfdd; }
.primary-trail span { display: grid; gap: 1px; flex: 1; }.primary-trail b { font-size: .78rem; }.primary-trail small { color: var(--muted); font-size: .65rem; }.primary-trail em { color: var(--accent); font-size: 1.5rem; font-style: normal; }
.primary-reward { display: flex; align-items: center; justify-content: space-between; padding: 11px 13px; margin-bottom: 8px; border-radius: 14px; color: #745424; background: #ffedbd; }
.primary-reward div { display: grid; }.primary-reward b { font-size: .76rem; }.primary-reward small { font-size: .62rem; }.primary-reward > span { font-size: 1.15rem; }
.primary-links { display: grid; gap: 3px; }
.graduate-focus { border-radius: 10px; border-left: 4px solid var(--accent); }
.graduate-focus > small { color: var(--accent-strong); font-size: .65rem; font-weight: 850; letter-spacing: .06em; }
.graduate-focus h2 { margin-top: 4px; font-size: 1.06rem; }.graduate-focus p { margin: 3px 0 12px; color: var(--muted); font-size: .71rem; }
.graduate-board { display: grid; grid-template-columns: repeat(2,1fr); gap: 7px; }
.graduate-board button { min-height: 82px; text-align: left; padding: 11px; border: 1px solid var(--line); border-radius: 10px; background: #fff; color: var(--ink); }
.graduate-board button span { color: var(--accent-strong); font-size: .58rem; font-weight: 850; }.graduate-board button b { font-size: .8rem; }.graduate-board button small { color: var(--muted); font-size: .63rem; }
.young-priority { border-radius: 14px 14px 25px 14px; background: #fbfdfb; }
.young-focus-row { display: flex; flex-wrap: wrap; gap: 6px; margin: 11px 0 14px; }.young-focus-row span { padding: 8px 9px; border-radius: 8px; background: #e5f0ec; color: #38695e; font-size: .7rem; font-weight: 750; }
.young-focus-row span:nth-child(2) { background: #f9eadc; color: #9a6d3a; }.young-focus-row span:nth-child(3) { background: #eee9f7; color: #76638e; }
.young-split { display: grid; grid-template-columns: 1fr 1fr; gap: 7px; }.young-split button { min-height: 72px; text-align: left; padding: 11px; border: 1px solid var(--line); border-radius: 13px; color: var(--ink); background: #fff; }.young-split b { font-size: .77rem; }.young-split small { color: var(--muted); font-size: .63rem; }
.midlife-compass { background: #fffefa; }
.midlife-compass .section-head h2 { font-family: var(--font-ui); font-size: 1.01rem; }
.compass-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 7px; margin: 8px 0 13px; }.compass-grid span { display: flex; align-items: center; gap: 7px; min-height: 43px; padding: 7px; background: #f2f5ec; border-radius: 8px; }.compass-grid i { color: #699272; font-size: 1.1rem; font-style: normal; }.compass-grid b { font-size: .71rem; }
.midlife-memory { padding: 14px; border-radius: 15px; background: #f3e9d8; }.midlife-memory b { font-size: .82rem; }.midlife-memory p { margin: 4px 0; font-size: .7rem; color: var(--muted); }.midlife-memory .btn { font-size: .72rem; padding: 5px 0; }
.community-unavailable { background: var(--paper); border-style: dashed; }
.existing-goal { display: grid; gap: 5px; padding: 12px; margin: 0 0 14px; border: 1px solid var(--line); border-radius: 12px; background: var(--paper); }
.existing-goal span { color: var(--accent-strong); font-size: .68rem; font-weight: 850; }.existing-goal strong { font-size: .81rem; }.existing-goal small { color: var(--muted); font-size: .68rem; }.existing-goal .btn { justify-self: start; padding: 4px 0; font-size: .72rem; }
[data-stage="elder"] .context span { font-size: .76rem; }
[data-stage="elder"] .context strong { font-size: .87rem; }
[data-stage="elder"] .context button { font-size: .73rem; }

/* P009–P016: adult self interview. The rule source and private scope stay visible. */
.home-interview-link { margin: 13px 0; padding: 17px; border: 1px solid var(--line); border-radius: 19px; background: linear-gradient(135deg,var(--paper),color-mix(in srgb,var(--accent) 13%,white)); }
.home-interview-link > span,.interview-entry-grid span,.interview-question > span,.interview-summary-card > span,.proposal-origin > span { color: var(--accent-strong); font-size: .69rem; font-weight: 800; letter-spacing: .03em; }
.home-interview-link h2 { margin: 6px 0 4px; font-size: 1rem; }.home-interview-link p { margin: 0 0 12px; color: var(--muted); font-size: .74rem; line-height: 1.6; }
.home-interview-link > div { display: flex; flex-wrap: wrap; align-items: center; gap: 5px; }.home-interview-link .btn { font-size: .75rem; }
.interview-entry-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; margin: 16px 0; }
.interview-entry-grid > div { display: grid; align-content: start; gap: 4px; min-height: 125px; padding: 14px; border: 1px solid var(--line); border-radius: 17px; background: var(--paper); }
.interview-entry-grid b { font-size: .9rem; }.interview-entry-grid small { color: var(--ui-text-subtle); font-size: .7rem; line-height: 1.5; }
.interview-resume,.interview-paused,.interview-question,.interview-mini-summary,.interview-summary-card,.interview-answer-card,.proposal-origin,.proposal-confirm { margin: 13px 0; padding: 16px; border: 1px solid var(--line); border-radius: 17px; background: var(--paper); }
.interview-resume { display: grid; gap: 7px; background: color-mix(in srgb,var(--accent) 8%,white); }.interview-resume span,.interview-answer-card small { color: var(--muted); font-size: .7rem; }.interview-resume strong { font-size: .93rem; }
.interview-question { background: linear-gradient(160deg,var(--paper),color-mix(in srgb,var(--accent) 9%,white)); }.interview-question h2 { margin: 9px 0; font-size: 1.18rem; line-height: 1.42; }.interview-question p,.interview-mini-summary p,.interview-paused p,.proposal-origin p,.proposal-confirm p { color: var(--muted); font-size: .75rem; line-height: 1.62; }
.interview-question .field { margin-top: 16px; }.interview-question textarea { min-height: 130px; }.interview-question-actions,.interview-answer-actions,.interview-status-actions { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.interview-summary-card h2 { margin: 13px 0 5px; font-size: .88rem; }.interview-summary-card ul { padding-left: 18px; }.interview-summary-card li,.interview-summary-card p { margin: 5px 0; font-size: .75rem; line-height: 1.6; }
.interview-answer-card { display: grid; gap: 7px; }.interview-answer-card b { font-size: .83rem; line-height: 1.4; }.interview-answer-card p { margin: 0; color: var(--ink); font-size: .76rem; line-height: 1.6; overflow-wrap: anywhere; }
.interview-answer-card textarea { min-height: 92px; }.interview-delete-confirm { padding: 10px; border-radius: 10px; background: #fff2ee; color: #8f4b45; font-size: .73rem; }.interview-delete-confirm .btn { margin-top: 8px; }
.interview-status { display: grid; gap: 4px; margin: 15px 0; padding: 11px 13px; border-left: 3px solid var(--accent); border-radius: 10px; background: color-mix(in srgb,var(--accent) 7%,white); font-size: .7rem; }
.interview-status b { color: var(--accent-strong); }.interview-status span,.interview-status small { color: var(--muted); }.interview-status p { margin: 4px 0; color: var(--ui-danger); font-weight: 700; }
.proposal-origin { display: grid; gap: 5px; border-style: dashed; }.proposal-origin b { font-size: .78rem; }.proposal-origin p { margin: 4px 0 0; }.proposal-confirm { background: color-mix(in srgb,var(--accent) 7%,white); }.proposal-confirm b { font-size: .8rem; }.proposal-confirm p { margin: 7px 0; overflow-wrap: anywhere; }.proposal-confirm small { color: var(--accent-strong); font-size: .7rem; }
.interview-boundary { margin: 12px 0; color: var(--ui-text-subtle); font-size: .7rem; line-height: 1.6; }.interview-proposal textarea { min-height: 105px; }
.plan-goal-intent { padding: 9px 10px; border-radius: 9px; background: color-mix(in srgb,var(--accent) 9%,white); color: var(--ink) !important; font-size: .76rem !important; overflow-wrap: anywhere; }
.interview-held-drafts { margin: 13px 0; padding: 14px; border: 1px solid #dfaf8f; border-radius: 15px; background: #fff8f0; }
.interview-held-drafts > strong { color: #8c553a; font-size: .86rem; }.interview-held-drafts > p { margin: 6px 0 12px; color: #805d49; font-size: .72rem; line-height: 1.6; }
.interview-held-item { display: grid; gap: 7px; margin-top: 9px; padding: 10px; border-radius: 11px; background: white; }.interview-held-item small { color: #8c553a; font-size: .7rem; }
.interview-held-item textarea { min-height: 66px; color: var(--ink); font-size: .75rem; }.interview-held-item > div { display: flex; flex-wrap: wrap; gap: 6px; }.interview-held-item .btn { font-size: .71rem; }
/* Keep interview guidance, error recovery and draft controls readable across states. */
.home-interview-link > span,.home-interview-link p,.home-interview-link .btn,
.interview-entry-grid span,.interview-entry-grid small,.interview-resume span,
.interview-question > span,.interview-question p,.interview-mini-summary p,
.interview-paused p,.interview-summary-card > span,.interview-summary-card li,
.interview-summary-card p,.interview-answer-card b,.interview-answer-card p,
.interview-answer-card small,.interview-delete-confirm,.interview-status,
.interview-status .btn,.proposal-origin > span,.proposal-origin b,
.proposal-origin p,.proposal-confirm b,.proposal-confirm p,
.proposal-confirm small,.interview-boundary,.interview-held-drafts > strong,
.interview-held-drafts > p,.interview-held-item small,.interview-held-item textarea,
.interview-held-item .btn { font-size: 14px; }
@media (max-width: 440px) { .interview-entry-grid { gap: 7px; }.interview-entry-grid > div { padding: 12px; }.interview-question-actions .btn { flex: 1; } }
.no-script-fallback { max-width: 480px; margin: 8vh auto; padding: 26px; border-radius: 22px; background: #fff; color: #202952; line-height: 1.7; }
.no-script-fallback h1 { margin: 0 0 10px; font-size: 1.55rem; }
.no-script-fallback p { color: #526084; }
.no-script-fallback a { display: inline-block; margin-top: 8px; padding: 10px 14px; border-radius: 12px; background: #eeeaff; color: #4145ac; font-weight: 700; }

/* WAVE-17 / B12: clean family-space cards and explicit permission boundaries. */
.family-screen { padding-bottom: 30px; }
.family-screen .step { color: var(--accent-strong); }
.family-screen h1 { margin: 9px 0 6px; font-size: 1.55rem; line-height: 1.26; }
.family-screen .lede { margin: 0 0 14px; font-size: .79rem; line-height: 1.55; }
.family-safe-icon { display: grid; place-items: center; flex: none; width: 35px; height: 35px; border-radius: 12px; background: #e8edfc; color: #5769c1; font-size: 1.15rem; }
.family-api-section,.family-preview-children { margin: 16px 0; padding: 15px; border: 1px solid var(--line); border-radius: 17px; background: var(--paper); }
.family-api-section h2,.family-preview-children h2 { margin: 0; font-size: .96rem; }.family-api-section .btn { margin-top: 10px; }
.family-count { margin: 7px 0; color: var(--muted); font-size: .72rem; }.family-preview-children .family-members { gap: 7px; margin: 9px 0; }
.family-preview-children .member-card { padding: 10px; border-radius: 12px; box-shadow: none; }.family-preview-children .avatar { width: 34px; height: 34px; }
.family-preview-children .micro-note { margin: 8px 0 0; line-height: 1.5; }
.family-card-list { display: grid; gap: 9px; margin: 13px 0; }.family-list-heading { display: flex; align-items: baseline; justify-content: space-between; margin: 0 2px 2px; }.family-list-heading b { font-size: .83rem; }.family-list-heading small { color: var(--muted); font-size: .68rem; }
.family-safe-card { position: relative; display: grid; gap: 10px; width: 100%; padding: 15px; text-align: left; color: var(--ink); border: 1px solid #e1e7f6; border-radius: 17px; background: linear-gradient(135deg,#fff 62%,#f0f3ff); box-shadow: 0 7px 20px rgba(78,97,165,.07); overflow: hidden; }
.family-safe-card::after { content: ''; position: absolute; right: -22px; bottom: -25px; width: 88px; height: 88px; border-radius: 50%; background: rgba(119,137,203,.06); pointer-events: none; }
.family-safe-card-top { display: flex; align-items: center; gap: 8px; color: var(--accent-strong); font-size: .7rem; font-weight: 800; }.family-safe-card-top .family-safe-icon { width: 27px; height: 27px; border-radius: 9px; font-size: .8rem; }.family-safe-card-top small { margin-left: auto; color: var(--muted); font-size: .64rem; }
.family-safe-card > b { position: relative; z-index: 1; font-size: .88rem; line-height: 1.5; overflow-wrap: anywhere; }.family-safe-link { position: relative; z-index: 1; color: var(--accent-strong); font-size: .7rem; font-weight: 750; }
.family-safe-detail { display: grid; gap: 13px; padding: 17px; margin: 14px 0; border: 1px solid #e0e8f8; border-radius: 17px; background: linear-gradient(145deg,#fff 65%,#f2f5ff); box-shadow: 0 8px 23px rgba(78,97,165,.06); }
.family-detail-top { display: flex; gap: 9px; align-items: center; }.family-detail-top > span:last-child { display: grid; gap: 2px; }.family-detail-top b { color: var(--accent-strong); font-size: .74rem; }.family-detail-top small { color: var(--muted); font-size: .65rem; }
.family-safe-detail h2 { margin: 0; font-size: 1.06rem; line-height: 1.5; overflow-wrap: anywhere; }.family-safe-detail p { margin: 0; color: var(--muted); font-size: .75rem; line-height: 1.6; }.family-detail-boundary { padding: 11px 12px; border-radius: 11px; background: #eff4ff; }.family-detail-boundary b { display: block; margin-bottom: 4px; color: var(--accent-strong); font-size: .72rem; }
.family-empty { padding: 17px; margin: 14px 0; border-radius: 16px; }.family-empty b { font-size: .88rem; }.family-empty p { margin: 7px 0 0; color: var(--muted); font-size: .75rem; line-height: 1.5; }
.family-compose { padding: 15px; margin: 13px 0; border-radius: 16px; }.family-compose .field { display: grid; gap: 6px; margin-bottom: 12px; font-size: .78rem; }.family-compose textarea { min-height: 105px; resize: vertical; }
.family-compose .micro-note { line-height: 1.55; }.family-screen .action-stack { gap: 8px; margin-top: 12px; }
.family-share-source { display: flex; align-items: flex-start; gap: 10px; margin: 12px 0; padding: 13px; border-radius: 15px; background: linear-gradient(130deg,#fff,#eff3ff); }
.family-share-source > div { display: grid; gap: 5px; min-width: 0; }.family-share-source small { color: var(--muted); font-size: .66rem; }.family-share-source b { font-size: .8rem; line-height: 1.5; overflow-wrap: anywhere; }
.family-share-list { display: grid; gap: 8px; margin: 15px 0; }.family-recipient { display: flex; align-items: center; gap: 10px; width: 100%; padding: 11px; border: 1px solid var(--line); border-radius: 13px; background: #fff; color: var(--ink); text-align: left; }
.family-recipient.selected { border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent-soft); }.family-recipient-avatar { display: grid; place-items: center; flex: none; width: 34px; height: 34px; border-radius: 50%; background: var(--accent-soft); color: var(--accent-strong); font-size: .74rem; }
.family-recipient > span:nth-child(2) { display: grid; gap: 3px; flex: 1; min-width: 0; }.family-recipient b { font-size: .76rem; }.family-recipient small { color: var(--muted); font-size: .65rem; }.family-recipient-check { color: var(--accent-strong); font-weight: 800; }
.family-share-decision { padding: 15px; border-radius: 15px; }.family-share-decision > b { color: var(--accent-strong); font-size: .8rem; }.family-share-decision > p { margin: 7px 0; color: var(--muted); font-size: .73rem; line-height: 1.55; }
.family-share-confirmed { padding: 10px; border-radius: 10px; background: #e8f5ee; color: #326d59; font-size: .73rem; font-weight: 800; line-height: 1.5; }

/* Goal, plan and feedback: keep decision copy readable in the live preview. */
section[data-page-id="P021-024"] .quote-card span,
section[data-page-id="P021-024"] .goal-sample-label,
section[data-page-id="P021-024"] .goal-card small,
section[data-page-id="P021-024"] .goal-card p,
section[data-page-id="P021-024"] .field small,
section[data-page-id="P021-024"] .privacy-callout,
section[data-page-id="P032-036"] .choice-grid .choice,
section[data-page-id="P032-036"] .field .hint,
section[data-page-id="P032-036"] .speech-input-button,
section[data-page-id="P021-024"] .api-status,
section[data-page-id="P025-031"] .api-status,
section[data-page-id="P032-036"] .api-status,
section[data-page-id="P021-024"] .api-status small,
section[data-page-id="P025-031"] .api-status small,
section[data-page-id="P032-036"] .api-status small { font-size: .875rem; line-height: 1.5; }

/* MEMORY-THREE-SECTIONS: one shared navigation, no retired gallery interstitial. */
.memory-sections { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-2, 8px); padding: var(--space-3, 12px); background: var(--ui-surface); border-bottom: 1px solid var(--ui-border); }
.memory-sections button { min-width: 0; min-height: 48px; padding: 10px 4px; border: 0; border-radius: var(--ui-radius-control); background: transparent; color: var(--ui-text-subtle); font: inherit; font-size: max(14px,.875rem); font-weight: 600; white-space: normal; cursor: pointer; }
.memory-sections button[aria-current="page"] { background: var(--ui-brand-soft); color: var(--ui-brand); }
.memory-sections button:focus-visible { outline: 2px solid var(--ui-focus); outline-offset: 2px; }
.memory-story-interview { padding: var(--space-4, 16px); }
.memory-story-interview .btn { width: 100%; }

/* APP-SHELL-GUARDRAILS
   The Consumer is rendered as an app frame inside the preview/browser. These
   rules are deliberately shared so age-specific screens cannot accidentally
   become a browser-wide page or let a fixed sheet escape its owner frame. */
html { min-width: 320px; background: #eef1f0; }
body { min-width: 320px; overflow-x: hidden; }
#app { min-height: 100dvh; display: grid; place-items: center; }
.desktop-layout {
  box-sizing: border-box;
  width: min(1120px, calc(100% - 24px));
  min-height: 100dvh;
  padding: 12px 0;
}
.phone-shell {
  box-sizing: border-box;
  width: min(450px, calc(100vw - 24px));
  height: min(890px, calc(100dvh - 24px));
  min-height: 0;
  margin: 12px auto;
  contain: layout paint;
  --bg: var(--ui-bg);
  --paper: var(--ui-surface);
  --ink: var(--ui-text);
  --muted: var(--ui-text-subtle);
  --line: var(--ui-border);
}
.phone-shell .viewport { min-width: 0; scrollbar-gutter: stable; }
.phone-shell > .viewport { background: var(--ui-bg); }
.phone-shell > .bottom-nav { position: relative; z-index: 2; }
.phone-shell > .bottom-nav button { min-width: 0; }
.phone-shell > .bottom-nav button:focus-visible { outline-offset: -3px; }
.phone-shell .viewport > :is(.screen, [class$="-screen"]) {
  box-sizing: border-box;
  min-height: min(100%, 100dvh);
  max-width: 100%;
  overflow-wrap: anywhere;
}

/* Fixed positioning is safe only when it belongs to the shell. The shell's
   layout/paint containment keeps legacy fixed descendants in this frame; the
   explicit selectors also remove viewport-sized backdrops and inline fixed
   wrappers from the legacy H5 flows. */
.phone-shell :is(
  .ai-gen-preview-fullscreen.expanded,
  .dx-voice-call,
  .cm-dialog-overlay,
  .mj-demo-overlay,
  .pc-overlay,
  .memory-comment-input-bar,
  .memory-fab,
  .reminder-fab,
  .task-fab,
  .h5-sheet,
  .h5-fab
) {
  position: absolute;
  max-width: 100%;
}
.phone-shell :is(.ai-gen-preview-fullscreen.expanded, .dx-voice-call, .cm-dialog-overlay, .mj-demo-overlay, .pc-overlay) {
  inset: 0;
}
.phone-shell [style*="position:fixed"],
.phone-shell [style*="position: fixed"] { position: absolute !important; }
.phone-shell :is(.memory-comment-input-bar, .memory-fab, .reminder-fab, .task-fab, .h5-fab) {
  right: 12px;
  left: auto;
  max-width: calc(100% - 24px);
}

/* A consistent interaction floor matters more for children, older adults and
   motor-fatigued users than a few pixels of visual density. */
.phone-shell :is(button, [role="button"], summary) { min-width: 44px; min-height: 44px; }
.phone-shell :is(input, select, textarea) { max-width: 100%; font-size: max(16px, 1em); }
.phone-shell :is(button, a, input, select, textarea, summary):focus-visible {
  outline: 3px solid var(--ui-focus);
  outline-offset: 3px;
}
.phone-shell :disabled { cursor: not-allowed; }
@media (prefers-reduced-motion: reduce) {
  .phone-shell *, .phone-shell *::before, .phone-shell *::after {
    scroll-behavior: auto !important;
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}

@media (max-width: 830px) {
  #app { display: block; padding: 0; }
  .desktop-layout { width: 100%; min-height: 100dvh; padding: 0; }
  .phone-shell {
    width: 100%;
    height: 100dvh;
    margin: 0;
    border: 0;
    border-radius: 0;
    box-shadow: none;
  }
  .context-mobile { display: none; }
}

/* The public desktop site uses the same product screens without a simulated
   handset bezel. Keep the shell as the containing block for sheets and FABs. */
@media (min-width: 831px) {
  .desktop-layout.app-focus {
    display: block;
    width: min(800px, calc(100% - 48px));
    padding: 24px 0;
  }
  .desktop-layout.app-focus > .phone-shell {
    width: 100%;
    height: calc(100dvh - 48px);
    min-height: 0;
    margin: 0;
    border: 1px solid var(--ui-border);
    border-radius: var(--ui-radius-card);
    box-shadow: var(--ui-shadow);
  }
}

.phone-shell .memory-media-screen :is(.section-head, .memory-media-empty) small { color: var(--ui-text-subtle); }
.phone-shell .state-screen > p {
  color: var(--ui-text-subtle);
  font-size: max(14px, .875rem);
}

/* Page landmarks can retain a heading without adding duplicate visible chrome. */
.ui-visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  border: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.discovery-search-label {
  display: block;
  margin-bottom: 6px;
  font-size: 1rem;
  font-weight: 650;
}

.discovery-search-field {
  container: discovery-search / inline-size;
  min-width: 0;
  font-size: max(16px, 1rem);
}

.discovery-search-field .speech-input-composer {
  min-height: 52px;
  padding: 3px 4px;
  gap: 4px;
}

.discovery-search-field:has(textarea) .speech-input-composer {
  border-radius: var(--ui-radius-control);
}

.discovery-search-field > :is(input, textarea) {
  box-sizing: border-box;
  width: 100%;
  min-width: 0;
  min-height: 52px;
  padding: 8px 12px;
  border: 1px solid var(--ui-border);
  border-radius: var(--ui-radius-control);
  background: var(--ui-surface);
  color: var(--ui-text);
  font: inherit;
}

.discovery-search-field :is(input, textarea)::placeholder {
  color: var(--ui-text-subtle);
  opacity: 1;
}

.discovery-search-compact-fields { display: none; }

@container discovery-search (max-width: 14.5rem) {
  .discovery-search-field .discovery-search-compact-fields {
    display: block;
    margin: 4px 0 0;
    color: var(--ui-text-subtle);
    font-size: max(14px, .875rem);
    line-height: 1.5;
  }
}

.discovery-search-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-top: 4px;
}

.discovery-search-footer p {
  min-width: 0;
  margin: 0;
  color: var(--ui-text-subtle);
  font-size: max(14px, .875rem);
  line-height: 1.5;
  overflow-wrap: anywhere;
}

.discovery-search-footer .discovery-search-submit {
  flex: 0 0 auto;
  min-width: 48px;
  min-height: 52px;
  padding: 4px 8px;
  border: 1px solid transparent;
  border-radius: var(--ui-radius-control);
  background: var(--ui-brand);
  color: var(--ui-on-brand, #fff);
  font: inherit;
  font-weight: 700;
  cursor: pointer;
}

/* Editorial writing examples are a separate teaching surface, never a person directory. */
.ee-entry{display:flex;gap:14px;margin:16px 16px 20px;padding:17px;border:1px solid #cbd9d7;border-radius:19px;background:linear-gradient(135deg,#eaf3f0,#f9fbfa);color:#183f49}
.ee-entry-mark{display:grid;place-items:center;flex:none;width:43px;height:43px;border-radius:13px;background:#254e5b;color:#fff;font-size:22px;font-weight:800}
.ee-entry>div:last-child{min-width:0}.ee-kicker{display:block;margin-bottom:5px;color:#356d66;font-size:12px;font-weight:800;letter-spacing:.04em}.ee-entry strong{display:block;font-size:18px;line-height:1.35}.ee-entry p{margin:8px 0 13px;font-size:13px;line-height:1.6;color:#4b6568}.ee-entry-actions{display:flex;flex-wrap:wrap;gap:8px}.ee-entry-actions button{min-height:44px;padding:8px 13px;border:1px solid #254e5b;border-radius:11px;background:#254e5b;color:white;font:inherit;font-size:13px;font-weight:750;cursor:pointer}.ee-entry-actions button+button{background:transparent;color:#254e5b}
.ee-screen{background:#f4f5f4;color:#19343c;padding:0 16px 28px;min-height:100%;container-type:inline-size}.ee-head{padding:19px 0 15px}.ee-back{min-height:44px;margin:0 0 20px;padding:8px 0;border:0;background:transparent;color:#254e5b;font:inherit;font-weight:750;cursor:pointer}.ee-status{display:inline-flex;width:max-content;padding:5px 9px;border-radius:7px;background:#fff0d3;color:#775213;font-size:12px;font-weight:800}.ee-head h1{margin:11px 0 7px;font-size:29px;line-height:1.18;letter-spacing:-.025em}.ee-head>p{margin:0;color:#526b6f;font-size:14px;line-height:1.65}.ee-facts{display:flex;flex-wrap:wrap;gap:6px;margin:12px 0 0}.ee-facts span{display:inline-flex;padding:5px 8px;border:1px solid #d6e0dc;border-radius:7px;background:#fff;color:#415c5c;font-size:11px;font-weight:750}.ee-modes{display:flex;gap:8px;margin:7px -16px 15px;padding:0 16px 4px;overflow-x:auto;scrollbar-width:thin}.ee-modes button{flex:none;min-height:44px;padding:9px 13px;border:1px solid #cedbd9;border-radius:99px;background:#fff;color:#385a5e;font:inherit;font-size:13px;font-weight:700;cursor:pointer}.ee-modes button[aria-pressed=true]{background:#254e5b;border-color:#254e5b;color:#fff}.ee-search{display:block;margin-bottom:8px}.ee-search span{display:block;margin-bottom:6px;color:#385a5e;font-size:12px;font-weight:750}.ee-search input{display:block;width:100%;min-height:44px;padding:9px 13px;border:1px solid #cbd9d7;border-radius:11px;background:#fff;color:#19343c;font:inherit;font-size:14px}.ee-count{margin:8px 0 13px;color:#5a7071;font-size:12px}.ee-list{display:grid;gap:11px}.ee-card{padding:16px 16px 0;border:1px solid #d8e1df;border-radius:17px;background:#fff;box-shadow:0 5px 20px #2149510a;overflow:hidden}.ee-card-top{display:flex;justify-content:space-between;align-items:center;gap:10px}.ee-mode{display:inline-flex;padding:5px 8px;border-radius:7px;background:#e8f2f0;color:#285a5a;font-size:12px;font-weight:800}.ee-index{color:#7a8988;font-size:12px}.ee-card h2{margin:12px 0 5px;font-size:18px;line-height:1.4}.ee-subject{margin:0;color:#657978;font-size:12px;line-height:1.5}.ee-summary{margin:12px 0;color:#365356;font-size:14px;line-height:1.65}.ee-disclosure{margin:13px 0 0;padding:9px 10px;border-radius:8px;background:#fff5e4;color:#704c21;font-size:12px;font-weight:750;line-height:1.55}.ee-ai{margin:8px 0 0;color:#5d7372;font-size:11px;font-weight:700}.ee-card>button{display:flex;justify-content:space-between;align-items:center;width:calc(100% + 32px);min-height:47px;margin:13px -16px 0;padding:8px 16px;border:0;border-top:1px solid #e3ebe8;background:#fff;color:#254e5b;font:inherit;font-size:13px;font-weight:800;text-align:left;cursor:pointer}.ee-card>button span{font-size:20px}.ee-empty{padding:18px;border:1px solid #d8e1df;border-radius:14px;background:#fff;color:#4f6668;line-height:1.6}.ee-empty button,.ee-inline-error button,.ee-more,.ee-detail-return{min-height:44px;padding:9px 13px;border:1px solid #254e5b;border-radius:10px;background:#254e5b;color:#fff;font:inherit;font-size:13px;font-weight:750;cursor:pointer}.ee-inline-error{padding:12px;color:#8a3c2f}.ee-more{display:block;width:100%;margin:13px 0}.ee-bottom-note{margin:18px 0 0;color:#657876;font-size:12px;line-height:1.6}.ee-detail-shade{position:fixed;z-index:100;inset:0;background:#142c3280;display:flex;justify-content:center;align-items:stretch}.ee-detail{position:relative;width:min(100%,560px);height:100%;padding:22px 20px 40px;background:#fff;overflow:auto;box-shadow:0 0 35px #17333a33}.ee-close{position:absolute;right:17px;top:17px;width:44px;height:44px;border:1px solid #d6e0dc;border-radius:11px;background:white;color:#254e5b;font:inherit;font-size:26px;cursor:pointer}.ee-detail>.ee-status{margin-right:8px}.ee-detail h2{margin:19px 0 8px;padding-right:32px;font-size:25px;line-height:1.32}.ee-detail h3{margin:24px 0 9px;font-size:16px}.ee-body{white-space:pre-wrap;color:#274248;font-size:15px;line-height:1.85}.ee-teach{margin:24px 0;padding:14px;border-radius:13px;background:#eaf3f0;color:#254e5b}.ee-teach h3{margin:0 0 5px}.ee-teach p{margin:0;font-size:14px;line-height:1.7}.ee-detail-return{width:100%}
@media(min-width:760px){.ee-screen{padding:0 26px 32px}.ee-modes{margin-left:-26px;margin-right:-26px;padding-left:26px;padding-right:26px}}
@container (min-width:700px){.ee-list{grid-template-columns:repeat(2,minmax(0,1fr))}}
.ee-art{position:relative;height:116px;margin:-16px -16px 15px;overflow:hidden;background:linear-gradient(120deg,#d5e9e5,#f6eace);display:grid;place-items:center;color:#315967;font-size:36px;font-weight:800}.ee-art img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}.ee-detail-art{height:150px;margin:-22px -20px 20px}.ee-card .ee-disclosure{margin-top:13px}
.ee-card .ee-art,.ee-detail .ee-detail-art{margin-bottom:0}
.ee-author{position:relative;z-index:1;display:flex;align-items:flex-end;gap:9px;min-width:0;margin:-27px 0 14px}
.ee-author>div{flex:1;min-width:0;padding:6px 8px;border-radius:10px;background:#fff}
.ee-author .ee-subject{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden;overflow-wrap:anywhere;color:#324f52;font-size:12px;font-weight:750;line-height:1.45}
.ee-author small{display:block;margin-top:2px;color:#6a7374;font-size:11px;font-weight:750;line-height:1.3}
.ee-avatar{box-sizing:border-box;display:block;flex:none;width:56px;height:56px;border:4px solid #fff;border-radius:50%;background:#f1eef7;object-fit:cover;object-position:center;box-shadow:0 3px 9px #19343c33}
.ee-detail .ee-author{margin-top:-32px;margin-bottom:18px}.ee-detail .ee-avatar{width:64px;height:64px}.ee-detail .ee-author .ee-subject{-webkit-line-clamp:3;font-size:13px}
.ee-detail-note{margin:16px 0 0;padding:10px 12px;border-radius:10px;background:#fff5e4;color:#705528;font-size:12px;line-height:1.55}
.ee-close{z-index:2}
.ee-review{margin:26px 0;padding:17px 0;border-top:1px solid #d8e1df}.ee-review h3{margin:0 0 6px}.ee-review>p{margin:0 0 15px;color:#617575;font-size:12px;line-height:1.6}.ee-review fieldset{margin:0 0 14px;padding:0;border:0}.ee-review legend,.ee-note-label{display:block;margin-bottom:7px;color:#294b52;font-size:13px;font-weight:750}.ee-review label:not(.ee-note-label){display:inline-flex;align-items:center;gap:4px;min-height:38px;margin-right:16px;font-size:13px}.ee-review input[type=radio]{width:18px;height:18px;accent-color:#254e5b}.ee-review textarea{display:block;width:100%;min-height:75px;padding:9px 11px;border:1px solid #cbd9d7;border-radius:10px;resize:vertical;font:inherit;font-size:13px}.ee-review>button{width:100%;min-height:44px;margin-top:10px;border:1px solid #254e5b;border-radius:10px;background:#254e5b;color:#fff;font:inherit;font-size:13px;font-weight:750;cursor:pointer}.ee-review #ee-feedback-status{min-height:19px;margin:8px 0 0;color:#2d6752}
.ee-review>button.ee-clear{margin-top:7px;background:#fff;color:#254e5b}
.ee-inline{min-height:0;margin:16px 16px 22px;padding:16px;border:1px solid #d8e1df;border-radius:19px;background:#f4f5f4}
.ee-inline .ee-head{padding:0 0 14px}.ee-inline .ee-head h2{margin:11px 0 7px;font-size:22px;line-height:1.3;letter-spacing:-.02em}
.ee-inline .ee-modes{margin-left:-16px;margin-right:-16px;padding-left:16px;padding-right:16px}
.ee-card-boundary{margin:11px 0 0;padding:7px 9px;border-radius:8px;background:#fff0d3;color:#704c21;font-size:12px;font-weight:800;line-height:1.5}
.ee-pages{display:flex;align-items:center;justify-content:center;gap:12px;margin:16px 0 0;color:#526b6f;font-size:13px;font-weight:700}
.ee-pages button{min-height:44px;padding:9px 15px;border:1px solid #254e5b;border-radius:10px;background:#fff;color:#254e5b;font:inherit;font-size:13px;font-weight:750;cursor:pointer}
.ee-pages button:disabled{cursor:wait;opacity:.55}
@media(min-width:760px){.ee-inline{margin:20px 26px 26px;padding:22px}.ee-inline .ee-modes{margin-left:-22px;margin-right:-22px;padding-left:22px;padding-right:22px}}
.ee-inline{box-sizing:border-box;margin:0;padding:0 0 28px;border:0;border-radius:0;background:var(--ui-bg,#f4f5f4)}
 .ee-inline .ee-mode-tabs{display:flex;gap:0;overflow-x:auto;margin:0;padding:0 12px;border-bottom:1px solid var(--ui-border,#d9dfde);background:var(--ui-surface,#fff);scrollbar-width:thin}
 .ee-inline .ee-mode-tabs button{flex:1 1 25%;min-width:0;min-height:70px;padding:10px 6px;border:0;border-bottom:3px solid transparent;border-radius:0;background:transparent;color:var(--ui-text-subtle,#657579);font:inherit;font-size:16px;font-weight:500;white-space:normal;overflow-wrap:anywhere;line-height:1.35;cursor:pointer}
.ee-inline .ee-mode-tabs button[aria-pressed="true"]{border-bottom-color:var(--ui-brand,#254e5b);background:transparent;color:var(--ui-brand,#254e5b);font-weight:800}
.ee-inline .ee-search-panel{--dating-edge:var(--ui-border,#d9dfde);--dating-paper:var(--ui-surface,#fff);--dating-muted:var(--ui-text-subtle,#657579);display:grid;gap:12px;margin:18px 16px 14px;padding:20px 18px;border:1px solid var(--dating-edge);border-radius:22px;background:var(--dating-paper)}
.ee-inline .ee-search-panel .dating-search-heading{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:6px 8px}
.ee-inline .ee-search-panel .dating-search-title{margin:0;color:var(--ui-text,#19343c);font-size:clamp(23px,6vw,30px);font-weight:800;line-height:1.3}
 .ee-inline .ee-write-unavailable{flex:none;padding:0;border:0;background:transparent;color:var(--ui-text-subtle,#657579);font:inherit;font-size:14px;font-weight:750;text-decoration:underline;text-underline-offset:3px;white-space:normal}.ee-inline .ee-write-unavailable small{display:block;font-size:14px;line-height:21px;font-weight:500;text-align:right;text-decoration:none}
.ee-inline .ee-search-field{min-width:0}.ee-inline .ee-search-field>input{box-sizing:border-box;display:block;width:100%;min-height:62px;border:1px solid var(--ui-border,#d9dfde);border-radius:999px;background:#fff;padding:12px 18px;color:var(--ui-text,#19343c);font:inherit;font-size:17px}
.ee-inline .ee-search-field .speech-input-composer{min-height:62px;padding:5px 7px;gap:6px;border-radius:999px}.ee-inline .ee-search-field .speech-input-composer>input{font-size:17px}
.ee-inline .ee-search-footer{display:flex;align-items:end;justify-content:space-between;gap:8px;margin-top:0}.ee-inline .ee-search-footer p{margin:0;color:var(--ui-text-subtle,#657579);font-size:14px;line-height:1.5}.ee-inline .ee-search-footer .discovery-search-submit{flex:none;min-width:74px;min-height:64px;padding:8px 10px;border:0;border-radius:17px;background:var(--ui-brand,#254e5b);color:#fff;font:inherit;font-size:18px;font-weight:800;cursor:pointer}
.ee-inline :is(.ee-count,.ee-list,.ee-pages,.ee-empty,.ee-inline-error){margin-left:16px;margin-right:16px}
@media(max-width:360px){.ee-inline .ee-mode-tabs{padding:0 6px}.ee-inline .ee-mode-tabs button{min-width:0;padding-inline:4px;font-size:14px}.ee-inline .ee-search-panel{margin-inline:12px;padding:17px 14px}.ee-inline .ee-search-panel .dating-search-title{font-size:23px}.ee-inline .ee-write-unavailable{font-size:14px}.ee-inline :is(.ee-count,.ee-list,.ee-pages,.ee-empty,.ee-inline-error){margin-left:12px;margin-right:12px}}

/* The Look cards use the same cover, overlapping avatar and detail affordance in every column. */
.ee-inline .ee-list{grid-template-columns:minmax(0,1fr)}
.ee-card{padding:0;border-radius:23px}
.ee-card .ee-art{height:clamp(155px,30vw,245px);margin:0}
.ee-visual-badge{position:absolute;z-index:1;top:14px;left:14px;max-width:calc(100% - 28px);padding:6px 10px;border-radius:9px;background:#fffdf4eb;color:#345360;font-size:12px;font-weight:800;line-height:1.4;box-shadow:0 2px 7px #19343c22}
.ee-card-content{padding:0 20px 20px}
.ee-card-identity{position:relative;z-index:1;display:flex;align-items:flex-start;gap:14px;margin-top:-37px}
.ee-card-identity .ee-avatar{width:clamp(78px,12vw,108px);height:clamp(78px,12vw,108px);border-width:5px;box-shadow:0 5px 16px #19343c33}
.ee-card-person{flex:1;min-width:0;padding-top:36px}
.ee-card-heading{display:flex;align-items:center;justify-content:space-between;gap:8px}
.ee-card .ee-card-heading h2{min-width:0;margin:0;color:#1a2f3d;font-size:clamp(19px,4vw,25px);font-weight:800;line-height:1.3;overflow-wrap:anywhere}
.ee-card-heading button{display:grid;place-items:center;flex:none;width:44px;height:44px;margin:-6px -8px -6px 0;padding:0;border:0;border-radius:11px;background:transparent;color:#254e5b;font:inherit;font-size:32px;line-height:1;cursor:pointer}
.ee-card-heading button:hover,.ee-card-heading button:focus-visible{background:#e8f2f0;outline-offset:2px}
.ee-card-meta{margin:5px 0 0;color:#60767b;font-size:14px;line-height:1.5;overflow-wrap:anywhere}
.ee-card-story{margin:17px 0 0;color:#203a46;font-size:18px;font-weight:650;line-height:1.45;overflow-wrap:anywhere}
.ee-card .ee-summary{margin:7px 0 0;color:#456068;font-size:14px;line-height:1.65}
.ee-card-chips{display:flex;flex-wrap:wrap;align-items:center;gap:7px;margin-top:14px}
.ee-card-chips :is(.ee-mode,.ee-context){display:inline-flex;max-width:100%;padding:6px 11px;border-radius:999px;background:#e8f2f0;color:#2b5a5d;font-size:12px;font-weight:750;line-height:1.4;overflow-wrap:anywhere}
.ee-card-chips .ee-context{background:#f0edf8;color:#5c4d75}
.ee-card-chips .ee-index{margin-left:auto}
.ee-card-content>.ee-disclosure{margin-top:15px}
@media(max-width:400px){.ee-card-content{padding-right:16px;padding-left:16px}.ee-card-identity{gap:10px}.ee-card-meta{font-size:13px}}
.ee-inline .ee-write-unavailable{text-decoration:none;white-space:normal;text-align:right}
.ee-card-chips .ee-intent{display:inline-flex;max-width:100%;padding:6px 11px;border-radius:999px;background:#fff0d3;color:#704c21;font-size:12px;font-weight:800;line-height:1.4;overflow-wrap:anywhere}
.ee-empty p{margin:0 0 10px}.ee-empty button{margin-top:2px}
#editorial-results{scroll-margin-top:76px}
.ee-list[hidden],.ee-pages[hidden]{display:none!important}
.viewport:has(.ee-detail-shade){overflow:hidden}
.ee-detail{overscroll-behavior:contain}
.ee-age-filter{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:12px 16px;background:#fff;border-bottom:1px solid var(--ui-border,#d9dfde)}
.ee-age-filter label{color:#345360;font-size:15px;font-weight:750;line-height:1.4}
.ee-age-filter select{min-width:0;max-width:60%;min-height:44px;padding:8px 12px;border:1px solid #b8c9c9;border-radius:10px;background:#fff;color:#19343c;font:inherit;font-size:16px}
.ee-screen[data-editorial-stage="all"] .ee-mode-tabs button{flex:0 0 auto;min-width:84px}
.ee-tab-hint{margin:6px 16px 0;color:#526b6f;font-size:14px;line-height:1.4}
.ee-screen[data-editorial-stage="elder"] :is(.ee-mode-tabs button,.ee-count,.ee-card-meta,.ee-card .ee-summary,.ee-card-chips .ee-mode,.ee-card-chips .ee-context,.ee-card-chips .ee-intent,.ee-detail-note,.ee-author .ee-subject,.ee-author small){font-size:max(16px,1rem)}
.ee-screen[data-editorial-stage="elder"] :is(.ee-card-story,.ee-body,.ee-teach p){font-size:max(18px,1.125rem)}
.ee-screen[data-editorial-stage="elder"] :is(.ee-search-footer p,.ee-age-filter label){font-size:16px}
.ee-screen[data-editorial-stage="elder"] .ee-visual-badge{font-size:14px}

/* Editorial cards and details follow the shared reading, disclosure and control roles. */
.ee-screen .ee-visual-badge{box-sizing:border-box;background:var(--ui-surface);color:var(--ui-text);font-size:max(14px,.875rem);line-height:1.5}
.ee-screen :is(.ee-status,.ee-facts span,.ee-author small,.ee-detail-note,.ee-disclosure,.ee-ai,.ee-review>p){font-size:max(14px,.875rem);line-height:1.5}
.ee-screen .ee-author .ee-subject{font-size:max(14px,.875rem)}
.ee-screen :is(.ee-count,.ee-search span,.ee-review legend,.ee-note-label){font-size:max(14px,.875rem)}
.ee-screen .ee-modes button{font-size:max(14px,.875rem)}
.ee-screen .ee-search input,.ee-screen .ee-review textarea{font-size:max(16px,1rem)}
.ee-screen .ee-card .ee-summary,.ee-screen :is(.ee-body,.ee-teach p){color:var(--ui-text-subtle);font-size:max(16px,1rem);line-height:1.625}
.ee-screen .ee-detail h3{font-size:max(20px,1.25rem)}
.ee-screen :is(.ee-mode,.ee-card-chips .ee-context,.ee-card-chips .ee-intent){font-size:max(14px,.875rem);line-height:1.5}
.ee-screen .ee-card-chips :is(.ee-mode,.ee-context){background:var(--ui-brand-soft);color:var(--ui-brand)}
.ee-screen .ee-card-chips .ee-intent{background:var(--ui-warning-bg);color:var(--ui-warning)}
.ee-screen .ee-card-heading button{color:var(--ui-brand)}
.ee-screen :is(.ee-empty button,.ee-inline-error button,.ee-detail-return,.ee-pages button,.ee-review>button){font-size:max(16px,1rem)}
.ee-screen .ee-review label:not(.ee-note-label){min-height:44px;font-size:max(16px,1rem)}
.ee-screen .ee-review>button[data-editorial-action="save-feedback"]{min-height:52px}
.ee-entry p{font-size:max(14px,.875rem)}
.ee-entry-actions button{font-size:max(16px,1rem)}
.ee-inline .ee-search-panel .dating-search-heading .ee-write-unavailable{text-decoration:none;color:var(--ui-text-subtle);cursor:default}
@media(max-width:360px){.ee-card-identity .ee-avatar{width:60px;height:60px}}

/* The browser entry gives desktop visitors a readable product overview while
   the existing application frame continues to own the interactive journey. */
.desktop-layout.site-welcome {
  grid-template-columns: minmax(0, 1fr) 450px;
  gap: clamp(32px, 5vw, 72px);
  width: min(1180px, calc(100% - 48px));
  align-items: center;
}
.site-intro { min-width: 0; padding: 24px 0; }
.site-intro-brand { display: flex; align-items: center; gap: 14px; }
.site-intro-mark { display: grid; place-items: center; flex: none; width: max(52px, 3.25rem); height: max(52px, 3.25rem); border-radius: var(--ui-radius-card); background: var(--ui-brand); color: #fff; font-size: max(24px, 1.5rem); font-weight: 800; }
.site-intro-brand > span:last-child { display: grid; gap: 2px; }
.site-intro-brand strong { font-size: max(19px, 1.1875rem); letter-spacing: .02em; }
.site-intro-brand small { color: var(--ui-text-subtle); font-size: max(14px, .875rem); }
.site-intro-kicker { margin: 46px 0 12px; color: var(--ui-brand); font-size: max(14px, .875rem); font-weight: 750; letter-spacing: .08em; }
.site-intro h2 { max-width: 580px; margin: 0; color: var(--ui-text); font-family: var(--ui-font); font-size: clamp(2.375rem, max(4vw, 3.2rem), 3.5rem); line-height: 1.18; letter-spacing: -.04em; }
.site-intro-lede { max-width: 550px; margin: 20px 0 30px; color: var(--ui-text-subtle); font-size: max(18px, 1.125rem); line-height: 1.7; }
.site-intro-paths { display: grid; gap: 10px; }
.site-intro-paths article { display: flex; gap: 16px; padding: 15px 18px; border: 1px solid var(--ui-border); border-radius: 18px; background: var(--ui-surface); }
.site-intro-paths article > span { flex: none; padding-top: 3px; color: var(--ui-brand); font-size: max(14px, .875rem); font-weight: 800; }
.site-intro-paths h3 { margin: 0 0 3px; font-size: max(17px, 1.0625rem); }
.site-intro-paths p { margin: 0; color: var(--ui-text-subtle); font-size: max(14px, .875rem); line-height: 1.55; }
.site-intro-action { display: flex; align-items: center; justify-content: space-between; gap: 14px; width: min(100%, 400px); min-height: 52px; margin-top: 26px; padding: 12px 18px; border: 0; border-radius: 14px; background: var(--ui-brand); color: #fff; font: inherit; font-size: max(16px, 1rem); font-weight: 750; text-align: left; cursor: pointer; }
.site-intro-action:hover { background: #1c3f4b; }
.site-intro-action:focus-visible { outline: 3px solid var(--ui-focus); outline-offset: 3px; }
.site-intro-status { max-width: 540px; margin: 12px 0 0; color: var(--ui-text-subtle); font-size: max(14px, .875rem); line-height: 1.5; }
@media (min-width: 831px) {
  /* The welcome preview contains real navigation controls, so its copy must
     grow with the same text preference as the adjacent desktop introduction. */
  .desktop-layout.site-welcome .ob-page-001 .ob-content { gap: clamp(48px, 12dvh, 160px); }
  .desktop-layout.site-welcome .ob-page-001 .ob-brand-hero h1 { font-size: max(42px, 2.625rem); }
  .desktop-layout.site-welcome .ob-page-001 .ob-brand-hero p { font-size: max(18px, 1.125rem); }
  .desktop-layout.site-welcome .ob-page-001 .ob-brand-hero small { font-size: max(16px, 1rem); }
  .desktop-layout.site-welcome .ob-page-001 :is(.ob-start-link, .ob-guest-link) { font-size: max(16px, 1rem); }
  .desktop-layout.site-welcome .ob-page-001 .ob-guest-note { font-size: max(14px, .875rem); }
}
@media (min-width: 831px) and (max-width: 1099px) {
  .desktop-layout.site-welcome { grid-template-columns: minmax(0, 1fr); width: min(720px, calc(100% - 40px)); gap: 18px; padding: 28px 0; }
  .site-intro { padding: 0; }
  .site-intro-kicker { margin-top: 28px; }
  .site-intro .site-intro-paths { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .site-intro-paths article { display: block; padding: 14px; }
  .site-intro-paths article > span { display: block; padding: 0 0 8px; }
}
@media (max-width: 830px) {
  .desktop-layout.site-welcome { display: block; width: 100%; padding: 0; }
  .site-intro { display: none; }
}