/**
 * TW-RUNTIME-WAVE-D-001 — family page composition (layout/flow only).
 * Object behavior: runtime/object_layers/family_objects.css
 * Scoped: [data-tw-domain="family"][data-tw-page="…"]
 */

/* ── TW-RUNTIME-THEMECSS-DECOMMISSION-001: family body atmosphere (not theme.css) ── */

html[data-theme="current_dark"] body[data-tw-domain="family"],
html[data-theme="current_dark"] body.tw-family-surface,
html[data-theme="current_dark"] body.tw-memory-surface {
  background:
    radial-gradient(1200px 500px at 10% -10%, var(--tw-atmosphere-warm), transparent 62%),
    radial-gradient(1000px 500px at 90% -18%, var(--tw-atmosphere-depth), transparent 56%),
    linear-gradient(150deg, var(--bg-0) 0%, var(--bg-1) 100%);
}

html[data-theme="night_memory"] body[data-tw-domain="family"],
html[data-theme="night_memory"] body.tw-family-surface,
html[data-theme="night_memory"] body.tw-memory-surface {
  background:
    radial-gradient(1100px 520px at 14% -4%, var(--tw-atmosphere-warm), transparent 62%),
    radial-gradient(900px 480px at 88% 8%, var(--tw-atmosphere-quiet), transparent 58%),
    radial-gradient(700px 360px at 50% 100%, var(--tw-atmosphere-depth), transparent 55%),
    linear-gradient(158deg, var(--bg-0) 0%, var(--bg-1) 100%);
}

html[data-theme="daylight_home"] body[data-tw-domain="family"],
html[data-theme="daylight_home"] body.tw-family-surface,
html[data-theme="daylight_home"] body.tw-memory-surface {
  font-family: var(--font-ui);
  line-height: 1.64;
  background:
    radial-gradient(1200px 520px at 8% -8%, var(--tw-atmosphere-warm), transparent 62%),
    radial-gradient(900px 440px at 94% 4%, var(--tw-atmosphere-quiet), transparent 58%),
    radial-gradient(700px 380px at 48% 100%, var(--tw-atmosphere-depth), transparent 55%),
    linear-gradient(162deg, var(--bg-0) 0%, var(--bg-1) 100%);
}

html[data-theme="family_archive"] body[data-tw-domain="family"],
html[data-theme="family_archive"] body.tw-family-surface,
html[data-theme="family_archive"] body.tw-memory-surface {
  font-family: var(--font-ui);
  line-height: 1.66;
  background:
    radial-gradient(1100px 500px at 14% -2%, var(--tw-atmosphere-warm), transparent 58%),
    radial-gradient(820px 400px at 86% 6%, var(--tw-atmosphere-quiet), transparent 54%),
    linear-gradient(172deg, var(--bg-0) 0%, var(--bg-1) 100%);
}

/* ── iam_family_entry.html → data-tw-page="iam-family-entry" ── */

[data-tw-domain="family"][data-tw-page="iam-family-entry"] body {
      margin:0; min-height:100vh; font-family:system-ui,-apple-system,sans-serif;
      background:var(--tw-surface-primary); color:var(--tw-text-primary); line-height:1.5;
      display:flex; align-items:center; justify-content:center; padding:24px 16px;
    }[data-tw-domain="family"][data-tw-page="iam-family-entry"] .shell {
      width:100%; max-width:640px; background:var(--tw-surface-primary);
      border:1px solid var(--tw-border-soft); border-radius:18px; padding:28px 26px;
    }[data-tw-domain="family"][data-tw-page="iam-family-entry"] .eyebrow {
      font-size:0.72rem; letter-spacing:0.12em; text-transform:uppercase;
      color:var(--tw-action-primary); margin:0 0 10px; font-weight:600;
    }[data-tw-domain="family"][data-tw-page="iam-family-entry"] h1 {
      margin:0 0 12px; font-size:clamp(1.35rem, 3.5vw, 1.75rem);
      font-weight:600; letter-spacing:-0.02em;
      font-family:Georgia,"Times New Roman",serif;
    }[data-tw-domain="family"][data-tw-page="iam-family-entry"] .lead { margin:0 0 10px; color:var(--tw-text-muted); font-size:15px; max-width:52ch; }[data-tw-domain="family"][data-tw-page="iam-family-entry"] .continuity {
      margin:0 0 22px; padding:14px 16px; border-radius:12px;
      background:var(--accent-soft); border:1px solid var(--tw-border-soft);
      font-size:14px; color:var(--tw-text-secondary);
    }[data-tw-domain="family"][data-tw-page="iam-family-entry"] .actions { display:flex; flex-direction:column; gap:12px; margin-top:8px; }[data-tw-domain="family"][data-tw-page="iam-family-entry"] .btn-quiet {
      display:inline-block; text-align:center; text-decoration:none;
      color:var(--tw-text-muted); font-size:14px; padding:8px 4px;
    }[data-tw-domain="family"][data-tw-page="iam-family-entry"] .btn-quiet:hover { color:var(--tw-text-primary); }[data-tw-domain="family"][data-tw-page="iam-family-entry"] .meta { margin-top:20px; font-size:12px; color:var(--tw-text-muted); }
    @media (max-width: 480px) {[data-tw-domain="family"][data-tw-page="iam-family-entry"] .shell { padding:22px 18px; }
    }


/* ── iam_family_workspace_mvp.html → data-tw-page="iam-family-workspace-mvp" ── */

[data-tw-domain="family"][data-tw-page="iam-family-workspace-mvp"] body { padding:24px; line-height:1.45; }[data-tw-domain="family"][data-tw-page="iam-family-workspace-mvp"] header { margin-bottom:28px; border-bottom:1px solid var(--tw-border-soft); padding-bottom:18px; display:flex; flex-wrap:wrap; justify-content:space-between; align-items:flex-end; gap:12px; }[data-tw-domain="family"][data-tw-page="iam-family-workspace-mvp"] h1 { font-size:1.45rem; margin:0 0 6px; font-weight:600; letter-spacing:-0.02em; }[data-tw-domain="family"][data-tw-page="iam-family-workspace-mvp"] .slug { color:var(--tw-text-muted); font-size:13px; }[data-tw-domain="family"][data-tw-page="iam-family-workspace-mvp"] .cosmos-nav { display:flex; flex-wrap:wrap; gap:10px 14px; margin-top:12px; }[data-tw-domain="family"][data-tw-page="iam-family-workspace-mvp"] .cosmos-nav a { color:var(--tw-action-primary); text-decoration:none; font-size:13px; font-weight:500; }[data-tw-domain="family"][data-tw-page="iam-family-workspace-mvp"] .cosmos-nav a.active { color:var(--tw-text-primary); border-bottom:1px solid var(--tw-action-primary); }[data-tw-domain="family"][data-tw-page="iam-family-workspace-mvp"] .btn { display:inline-block; background:var(--tw-action-primary); color:var(--tw-text-primary); text-decoration:none; font-weight:600; padding:10px 16px; border-radius:8px; font-size:14px; }[data-tw-domain="family"][data-tw-page="iam-family-workspace-mvp"] .workspace-shell { background:var(--tw-surface-primary); border:1px solid var(--tw-border-soft); border-radius:16px; padding:28px 26px 32px; max-width:920px; overflow:hidden; }[data-tw-domain="family"][data-tw-page="iam-family-workspace-mvp"] h2.memories-title { margin:0 0 6px; color:var(--tw-action-primary); font-weight:600; letter-spacing:0.04em; text-transform:uppercase; font-size:0.78rem; }[data-tw-domain="family"][data-tw-page="iam-family-workspace-mvp"] .timeline-flow-note { margin:0 0 22px; font-size:13px; color:var(--tw-text-muted); line-height:1.5; max-width:36rem; }[data-tw-domain="family"][data-tw-page="iam-family-workspace-mvp"] .layout { display:flex; gap:28px; align-items:flex-start; flex-wrap:wrap; }[data-tw-domain="family"][data-tw-page="iam-family-workspace-mvp"] .timeline-nav { flex:0 0 auto; min-width:120px; max-width:160px; position:sticky; top:16px; padding:12px 14px; border-radius:10px; background:var(--accent-soft); border:1px solid var(--tw-border-soft); }[data-tw-domain="family"][data-tw-page="iam-family-workspace-mvp"] .timeline-nav a { display:block; color:var(--tw-action-primary); text-decoration:none; font-size:13px; padding:6px 0; border-bottom:1px solid transparent; }[data-tw-domain="family"][data-tw-page="iam-family-workspace-mvp"] .timeline-nav a:hover { border-bottom-color:var(--rail); }[data-tw-domain="family"][data-tw-page="iam-family-workspace-mvp"] .timeline-main { flex:1 1 420px; min-width:0; overflow:hidden; }[data-tw-domain="family"][data-tw-page="iam-family-workspace-mvp"] .year-block { margin-bottom:48px; scroll-margin-top:24px; padding-bottom:8px; }[data-tw-domain="family"][data-tw-page="iam-family-workspace-mvp"] .year-block:last-child { margin-bottom:0; padding-bottom:0; }[data-tw-domain="family"][data-tw-page="iam-family-workspace-mvp"] .year-rail { display:flex; align-items:center; gap:12px; margin-bottom:20px; }[data-tw-domain="family"][data-tw-page="iam-family-workspace-mvp"] .year-rail::after { content:""; flex:1; height:1px; background:var(--rail); opacity:0.45; }[data-tw-domain="family"][data-tw-page="iam-family-workspace-mvp"] h3.year-heading { font-size:1.35rem; margin:0; font-weight:600; letter-spacing:0.02em; font-family:var(--tw-font-memory, Georgia,"Times New Roman",serif); color:var(--tw-text-primary); }[data-tw-domain="family"][data-tw-page="iam-family-workspace-mvp"] .period-cluster { margin-bottom:28px; }[data-tw-domain="family"][data-tw-page="iam-family-workspace-mvp"] .period-cluster:last-child { margin-bottom:0; }[data-tw-domain="family"][data-tw-page="iam-family-workspace-mvp"] .period-label { font-size:12px; letter-spacing:0.06em; text-transform:uppercase; color:var(--tw-text-muted); margin:0 0 14px; font-weight:600; }[data-tw-domain="family"][data-tw-page="iam-family-workspace-mvp"] .memory-cluster { display:flex; flex-direction:column; gap:18px; }[data-tw-domain="family"][data-tw-page="iam-family-workspace-mvp"] .mem {
      padding:16px 18px; border:1px solid var(--tw-border-soft); border-radius:14px;
      background:var(--tw-bg-soft, var(--tw-bg-soft, var(--bg-1))); display:flex; gap:16px; align-items:flex-start;
      min-width:0; overflow:hidden;
    }[data-tw-domain="family"][data-tw-page="iam-family-workspace-mvp"] .mem-thumb {
      flex:0 0 120px;
      width:120px;
      height:120px;
      min-width:120px;
      min-height:120px;
      max-width:120px;
      max-height:120px;
      aspect-ratio:1 / 1;
      align-self:flex-start;
      border-radius:12px;
      overflow:hidden;
      border:1px solid var(--tw-border-soft);
      background:var(--tw-bg-soft, var(--tw-bg-soft, var(--bg-1)));
      display:block;
      line-height:0;
      font-size:0;
      contain:layout paint;
    }[data-tw-domain="family"][data-tw-page="iam-family-workspace-mvp"] .mem-thumb img {
      display:block;
      width:100%;
      height:100%;
      min-width:100%;
      min-height:100%;
      max-height:100%;
      object-fit:cover;
      object-position:center center;
      vertical-align:top;
    }[data-tw-domain="family"][data-tw-page="iam-family-workspace-mvp"] .mem-body { flex:1 1 auto; min-width:0; overflow:hidden; }[data-tw-domain="family"][data-tw-page="iam-family-workspace-mvp"] .mem-title { font-weight:600; margin-bottom:6px; font-size:1rem; min-width:0; overflow-wrap:anywhere; }[data-tw-domain="family"][data-tw-page="iam-family-workspace-mvp"] .mem-title a { color:var(--tw-text-primary); text-decoration:none; overflow-wrap:anywhere; }[data-tw-domain="family"][data-tw-page="iam-family-workspace-mvp"] .mem-title a:hover { color:var(--tw-action-primary); }[data-tw-domain="family"][data-tw-page="iam-family-workspace-mvp"] .mem-preview { color:var(--tw-text-muted); font-size:14px; line-height:1.55; min-width:0; overflow-wrap:anywhere; }[data-tw-domain="family"][data-tw-page="iam-family-workspace-mvp"] .meta { font-size:12px; color:var(--tw-text-muted); margin-top:8px; display:flex; flex-wrap:wrap; align-items:center; gap:6px 10px; min-width:0; overflow:hidden; }[data-tw-domain="family"][data-tw-page="iam-family-workspace-mvp"] .meta span, [data-tw-domain="family"][data-tw-page="iam-family-workspace-mvp"] .meta a { min-width:0; max-width:100%; overflow-wrap:anywhere; }[data-tw-domain="family"][data-tw-page="iam-family-workspace-mvp"] .meta a { color:var(--tw-action-primary); text-decoration:none; font-size:12px; }[data-tw-domain="family"][data-tw-page="iam-family-workspace-mvp"] .empty { color:var(--tw-text-muted); font-size:14px; margin:0; }[data-tw-domain="family"][data-tw-page="iam-family-workspace-mvp"] .source-badge { display:inline-block; font-size:11px; font-weight:600; letter-spacing:0.03em; padding:2px 8px; border-radius:6px; background:var(--accent-soft); color:var(--tw-action-primary); }[data-tw-domain="family"][data-tw-page="iam-family-workspace-mvp"] .presence-chip { display:inline-block; font-size:11px; font-weight:500; padding:2px 9px; border-radius:999px; border:1px solid var(--tw-atmosphere-fade); background:var(--tw-atmosphere-fade); color:var(--tw-text-primary); }[data-tw-domain="family"][data-tw-page="iam-family-workspace-mvp"] .place-chip { display:inline-block; font-size:11px; font-weight:500; padding:2px 9px; border-radius:999px; border:1px solid var(--tw-atmosphere-fade); background:var(--tw-atmosphere-fade); color:var(--tw-text-primary); }[data-tw-domain="family"][data-tw-page="iam-family-workspace-mvp"] .artifact-chip { display:inline-block; font-size:11px; font-weight:500; padding:2px 9px; border-radius:999px; border:1px solid var(--tw-atmosphere-fade); background:var(--tw-atmosphere-fade); color:var(--tw-text-primary); font-style:italic; }[data-tw-domain="family"][data-tw-page="iam-family-workspace-mvp"] .temporal-primary { color:var(--tw-text-primary); font-weight:500; }[data-tw-domain="family"][data-tw-page="iam-family-workspace-mvp"] .temporal-secondary { color:var(--tw-text-muted); font-size:11px; }[data-tw-domain="family"][data-tw-page="iam-family-workspace-mvp"] .reentry-shell { margin-bottom:32px; max-width:920px; padding-bottom:8px; border-bottom:1px solid var(--tw-border-soft); opacity:0.96; }[data-tw-domain="family"][data-tw-page="iam-family-workspace-mvp"] .reentry-heading { font-size:1.15rem; margin:0 0 4px; font-weight:600; letter-spacing:-0.02em; font-family:Georgia,"Times New Roman",serif; }[data-tw-domain="family"][data-tw-page="iam-family-workspace-mvp"] .reentry-sub { color:var(--tw-text-muted); font-size:13px; margin:0 0 14px; }[data-tw-domain="family"][data-tw-page="iam-family-workspace-mvp"] .reentry-grid { display:flex; flex-direction:column; gap:10px; }[data-tw-domain="family"][data-tw-page="iam-family-workspace-mvp"] .reentry-card {
      display:flex; gap:12px; align-items:flex-start;
      padding:12px 14px; border-radius:12px;
      background:var(--tw-surface-primary); border:1px solid var(--tw-border-soft);
      text-decoration:none; color:inherit; min-width:0;
    }[data-tw-domain="family"][data-tw-page="iam-family-workspace-mvp"] .reentry-card:hover { border-color:var(--rail); background:var(--tw-bg-soft, var(--tw-bg-soft, var(--bg-1))); }[data-tw-domain="family"][data-tw-page="iam-family-workspace-mvp"] .reentry-thumb {
      flex:0 0 72px; width:72px; height:72px; border-radius:10px;
      overflow:hidden; border:1px solid var(--tw-border-soft); background:var(--tw-bg-soft, var(--tw-bg-soft, var(--bg-1)));
    }[data-tw-domain="family"][data-tw-page="iam-family-workspace-mvp"] .reentry-thumb img { width:100%; height:100%; object-fit:cover; display:block; }[data-tw-domain="family"][data-tw-page="iam-family-workspace-mvp"] .reentry-body { flex:1 1 auto; min-width:0; }[data-tw-domain="family"][data-tw-page="iam-family-workspace-mvp"] .reentry-reason { font-size:11px; color:var(--tw-action-primary); font-weight:600; letter-spacing:0.03em; margin-bottom:4px; }[data-tw-domain="family"][data-tw-page="iam-family-workspace-mvp"] .reentry-title { font-weight:600; font-size:0.95rem; margin-bottom:4px; overflow-wrap:anywhere; }[data-tw-domain="family"][data-tw-page="iam-family-workspace-mvp"] .reentry-summary { font-size:13px; color:var(--tw-text-muted); line-height:1.45; overflow-wrap:anywhere; }[data-tw-domain="family"][data-tw-page="iam-family-workspace-mvp"] .reentry-meta { font-size:11px; color:var(--tw-text-muted); margin-top:6px; }
    @media (max-width:640px) {[data-tw-domain="family"][data-tw-page="iam-family-workspace-mvp"] .layout { flex-direction:column; }[data-tw-domain="family"][data-tw-page="iam-family-workspace-mvp"] .timeline-nav { position:relative; top:0; max-width:none; display:flex; flex-wrap:wrap; gap:8px 14px; }[data-tw-domain="family"][data-tw-page="iam-family-workspace-mvp"] .timeline-nav a { display:inline-block; padding:4px 0; margin-right:10px; }
    }


/* ── memory_detail.html → data-tw-page="memory-detail" ── */

[data-tw-domain="family"][data-tw-page="memory-detail"] body { margin:0; min-height:100vh; font-family:system-ui,sans-serif; background:var(--tw-surface-primary); color:var(--tw-text-primary); padding:20px 16px 32px; box-sizing:border-box; }[data-tw-domain="family"][data-tw-page="memory-detail"] body * { box-sizing: border-box; }[data-tw-domain="family"][data-tw-page="memory-detail"] a.back { color:var(--tw-action-primary); text-decoration:none; font-size:14px; display:inline-block; margin-bottom:16px; }[data-tw-domain="family"][data-tw-page="memory-detail"] a.back:hover { text-decoration:underline; }[data-tw-domain="family"][data-tw-page="memory-detail"] .banner { background:var(--tw-atmosphere-fade); border:1px solid var(--tw-atmosphere-fade); color:var(--ok); padding:10px 14px; border-radius:10px; margin-bottom:16px; font-size:14px; }[data-tw-domain="family"][data-tw-page="memory-detail"] h1 { font-size:1.45rem; margin:0 0 12px; line-height:1.25; max-width:720px; }[data-tw-domain="family"][data-tw-page="memory-detail"] .meta { font-size:13px; color:var(--tw-text-muted); margin-bottom:18px; max-width:720px; display:flex; flex-wrap:wrap; align-items:center; gap:6px 10px; }[data-tw-domain="family"][data-tw-page="memory-detail"] .presence-chip { display:inline-block; font-size:12px; font-weight:500; padding:3px 10px; border-radius:999px; border:1px solid var(--tw-atmosphere-fade); background:var(--tw-atmosphere-fade); color:var(--tw-text-primary); }[data-tw-domain="family"][data-tw-page="memory-detail"] .place-chip { display:inline-block; font-size:12px; font-weight:500; padding:3px 10px; border-radius:999px; border:1px solid var(--tw-atmosphere-fade); background:var(--tw-atmosphere-fade); color:var(--tw-text-primary); }[data-tw-domain="family"][data-tw-page="memory-detail"] .artifact-chip { display:inline-block; font-size:12px; font-weight:500; padding:3px 10px; border-radius:999px; border:1px solid var(--tw-atmosphere-fade); background:var(--tw-atmosphere-fade); color:var(--tw-text-primary); font-style:italic; }[data-tw-domain="family"][data-tw-page="memory-detail"] .artifact-echoes { margin:0 0 22px; max-width:720px; }[data-tw-domain="family"][data-tw-page="memory-detail"] .artifact-echoes h2 { font-size:0.85rem; margin:0 0 10px; color:var(--tw-text-muted); font-weight:600; letter-spacing:0.04em; text-transform:uppercase; }[data-tw-domain="family"][data-tw-page="memory-detail"] .artifact-echo-list { list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:8px; }[data-tw-domain="family"][data-tw-page="memory-detail"] .artifact-echo-list a { color:var(--tw-action-primary); text-decoration:none; font-size:14px; line-height:1.45; }[data-tw-domain="family"][data-tw-page="memory-detail"] .artifact-echo-list a:hover { text-decoration:underline; }[data-tw-domain="family"][data-tw-page="memory-detail"] .artifact-echo-meta { color:var(--tw-text-muted); font-size:12px; margin-left:6px; }[data-tw-domain="family"][data-tw-page="memory-detail"] .place-echoes { margin:0 0 22px; max-width:720px; }[data-tw-domain="family"][data-tw-page="memory-detail"] .place-echoes h2 { font-size:0.85rem; margin:0 0 10px; color:var(--tw-text-muted); font-weight:600; letter-spacing:0.04em; text-transform:uppercase; }[data-tw-domain="family"][data-tw-page="memory-detail"] .place-echo-list { list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:8px; }[data-tw-domain="family"][data-tw-page="memory-detail"] .place-echo-list a { color:var(--tw-action-primary); text-decoration:none; font-size:14px; line-height:1.45; }[data-tw-domain="family"][data-tw-page="memory-detail"] .place-echo-list a:hover { text-decoration:underline; }[data-tw-domain="family"][data-tw-page="memory-detail"] .place-echo-meta { color:var(--tw-text-muted); font-size:12px; margin-left:6px; }[data-tw-domain="family"][data-tw-page="memory-detail"] .presence-echoes { margin:18px 0 22px; max-width:720px; }[data-tw-domain="family"][data-tw-page="memory-detail"] .presence-echoes h2 { font-size:0.85rem; margin:0 0 10px; color:var(--tw-text-muted); font-weight:600; letter-spacing:0.04em; text-transform:uppercase; }[data-tw-domain="family"][data-tw-page="memory-detail"] .presence-echo-list { list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:8px; }[data-tw-domain="family"][data-tw-page="memory-detail"] .presence-echo-list a { color:var(--tw-action-primary); text-decoration:none; font-size:14px; line-height:1.45; }[data-tw-domain="family"][data-tw-page="memory-detail"] .presence-echo-list a:hover { text-decoration:underline; }[data-tw-domain="family"][data-tw-page="memory-detail"] .presence-echo-meta { color:var(--tw-text-muted); font-size:12px; margin-left:6px; }[data-tw-domain="family"][data-tw-page="memory-detail"] .body { background:var(--tw-surface-primary); border:1px solid var(--tw-border-soft); border-radius:14px; padding:18px; max-width:720px; width:100%; white-space:pre-wrap; line-height:1.6; font-size:15px; }[data-tw-domain="family"][data-tw-page="memory-detail"] .memory-texture h2 { font-size:0.92rem; margin:0 0 14px; color:var(--tw-text-muted); font-weight:500; letter-spacing:0.01em; text-transform:none; font-family:inherit; }[data-tw-domain="family"][data-tw-page="memory-detail"] .texture-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(min(100%,100px),1fr)); gap:14px 12px; width:100%; }[data-tw-domain="family"][data-tw-page="memory-detail"] .texture-cell { display:flex; flex-direction:column; gap:8px; min-width:0; }[data-tw-domain="family"][data-tw-page="memory-detail"] .texture-grid a { display:block; border-radius:10px; overflow:hidden; border:1px solid var(--tw-border-soft); background:var(--bg-0); }[data-tw-domain="family"][data-tw-page="memory-detail"] .texture-grid a:focus-visible { outline:2px solid var(--tw-action-primary); outline-offset:2px; }[data-tw-domain="family"][data-tw-page="memory-detail"] .texture-grid img { width:100%; height:112px; object-fit:cover; display:block; vertical-align:middle; }[data-tw-domain="family"][data-tw-page="memory-detail"] .memory-texture-more { font-size:13px; line-height:1.5; color:var(--tw-text-muted); margin:14px 0 0; max-width:32rem; }[data-tw-domain="family"][data-tw-page="memory-detail"] .media-meta { font-size:11px; line-height:1.35; color:var(--tw-text-muted); padding:0 2px 4px; }[data-tw-domain="family"][data-tw-page="memory-detail"] .media-meta-line { margin-top:2px; }[data-tw-domain="family"][data-tw-page="memory-detail"] .artifact-meta { font-size:12px; line-height:1.45; color:var(--tw-text-muted); padding:6px 2px 2px; }[data-tw-domain="family"][data-tw-page="memory-detail"] .artifact-type-line { font-size:11px; text-transform:lowercase; letter-spacing:0.03em; opacity:.85; margin-bottom:4px; }[data-tw-domain="family"][data-tw-page="memory-detail"] .artifact-temporal { color:var(--tw-text-primary); font-size:13px; margin-bottom:3px; }[data-tw-domain="family"][data-tw-page="memory-detail"] .artifact-archive, [data-tw-domain="family"][data-tw-page="memory-detail"] .artifact-note { font-size:12px; margin-top:2px; }[data-tw-domain="family"][data-tw-page="memory-detail"] .connected-memories { margin-top:20px; max-width:720px; width:100%; }[data-tw-domain="family"][data-tw-page="memory-detail"] .connected-memories h2 { font-size:0.95rem; margin:0 0 12px; color:var(--tw-text-muted); font-weight:600; letter-spacing:0.04em; text-transform:uppercase; }[data-tw-domain="family"][data-tw-page="memory-detail"] .connection-empty { background:var(--tw-surface-primary); border:1px dashed var(--tw-border-soft); border-radius:14px; padding:16px; color:var(--tw-text-muted); font-size:14px; line-height:1.5; margin-bottom:14px; }[data-tw-domain="family"][data-tw-page="memory-detail"] .connection-form-intro { font-size:14px; color:var(--tw-text-muted); margin:0 0 12px; line-height:1.5; }[data-tw-domain="family"][data-tw-page="memory-detail"] .connection-card { background:var(--tw-surface-primary); border:1px solid var(--tw-border-soft); border-radius:14px; padding:14px 16px; margin-top:12px; display:flex; justify-content:space-between; gap:12px; align-items:flex-start; }[data-tw-domain="family"][data-tw-page="memory-detail"] .connection-card-main { min-width:0; }[data-tw-domain="family"][data-tw-page="memory-detail"] .connection-title { color:var(--tw-text-primary); font-weight:600; text-decoration:none; }[data-tw-domain="family"][data-tw-page="memory-detail"] .connection-title:hover { text-decoration:underline; }[data-tw-domain="family"][data-tw-page="memory-detail"] .connection-type { font-size:13px; color:var(--tw-text-muted); margin-top:6px; }[data-tw-domain="family"][data-tw-page="memory-detail"] .connection-form { background:var(--tw-surface-primary); border:1px solid var(--tw-border-soft); border-radius:14px; padding:16px; margin-top:14px; }[data-tw-domain="family"][data-tw-page="memory-detail"] .connection-form label { display:block; font-size:13px; color:var(--tw-text-muted); margin-bottom:6px; }[data-tw-domain="family"][data-tw-page="memory-detail"] .connection-form select { width:100%; border:1px solid var(--tw-border-soft); border-radius:10px; background:var(--bg-0); color:var(--tw-text-primary); padding:10px 12px; font:inherit; }[data-tw-domain="family"][data-tw-page="memory-detail"] .connection-form .field { margin-bottom:12px; }[data-tw-domain="family"][data-tw-page="memory-detail"] .ghost-btn { display:inline-flex; align-items:center; justify-content:center; border:1px solid var(--tw-border-soft); background:var(--bg-0); color:var(--tw-text-muted); border-radius:10px; padding:8px 12px; font:inherit; cursor:pointer; }[data-tw-domain="family"][data-tw-page="memory-detail"] .reflections { margin-top:20px; max-width:720px; width:100%; }[data-tw-domain="family"][data-tw-page="memory-detail"] .reflections h2 { font-size:0.95rem; margin:0 0 12px; color:var(--tw-text-muted); font-weight:600; letter-spacing:0.04em; text-transform:uppercase; }[data-tw-domain="family"][data-tw-page="memory-detail"] .reflection-empty { background:var(--tw-surface-primary); border:1px dashed var(--tw-border-soft); border-radius:14px; padding:16px; color:var(--tw-text-muted); font-size:14px; line-height:1.5; }[data-tw-domain="family"][data-tw-page="memory-detail"] .reflection-card { background:var(--tw-surface-primary); border:1px solid var(--tw-border-soft); border-radius:14px; padding:14px 16px; margin-top:12px; }[data-tw-domain="family"][data-tw-page="memory-detail"] .memory-layers { margin:22px 0; max-width:720px; }[data-tw-domain="family"][data-tw-page="memory-detail"] .memory-layers h2 { font-size:0.95rem; margin:0 0 10px; color:var(--tw-text-muted); font-weight:600; letter-spacing:0.04em; text-transform:uppercase; }[data-tw-domain="family"][data-tw-page="memory-detail"] .memory-layers-intro { font-size:14px; color:var(--tw-text-muted); line-height:1.5; margin:0 0 14px; }[data-tw-domain="family"][data-tw-page="memory-detail"] .memory-layer-meta { font-size:13px; color:var(--tw-text-muted); margin-bottom:8px; }[data-tw-domain="family"][data-tw-page="memory-detail"] .memory-layer-author { color:var(--tw-text-primary); font-weight:600; }[data-tw-domain="family"][data-tw-page="memory-detail"] .memory-layer-body { white-space:pre-wrap; line-height:1.55; font-size:14px; }[data-tw-domain="family"][data-tw-page="memory-detail"] .memory-layer-form label { display:block; font-size:13px; color:var(--tw-text-muted); margin-bottom:6px; }[data-tw-domain="family"][data-tw-page="memory-detail"] .memory-layer-form textarea { min-height:120px; resize:vertical; }[data-tw-domain="family"][data-tw-page="memory-detail"] .memory-layer-form .field { margin-bottom:12px; }[data-tw-domain="family"][data-tw-page="memory-detail"] .reflection-meta { font-size:13px; color:var(--tw-text-muted); margin-bottom:8px; }[data-tw-domain="family"][data-tw-page="memory-detail"] .reflection-author { color:var(--tw-text-primary); font-weight:600; }[data-tw-domain="family"][data-tw-page="memory-detail"] .reflection-body { white-space:pre-wrap; line-height:1.55; font-size:14px; }[data-tw-domain="family"][data-tw-page="memory-detail"] .reflection-form { background:var(--tw-surface-primary); border:1px solid var(--tw-border-soft); border-radius:14px; padding:16px; margin-top:14px; }[data-tw-domain="family"][data-tw-page="memory-detail"] .reflection-form label { display:block; font-size:13px; color:var(--tw-text-muted); margin-bottom:6px; }[data-tw-domain="family"][data-tw-page="memory-detail"] .reflection-form input, [data-tw-domain="family"][data-tw-page="memory-detail"] .reflection-form textarea { width:100%; border:1px solid var(--tw-border-soft); border-radius:10px; background:var(--bg-0); color:var(--tw-text-primary); padding:10px 12px; font:inherit; }[data-tw-domain="family"][data-tw-page="memory-detail"] .reflection-form textarea { min-height:120px; resize:vertical; }[data-tw-domain="family"][data-tw-page="memory-detail"] .reflection-form .field { margin-bottom:12px; }[data-tw-domain="family"][data-tw-page="memory-detail"] .continuity-threads { margin:22px 0; max-width:720px; }[data-tw-domain="family"][data-tw-page="memory-detail"] .continuity-threads h2 { font-size:0.95rem; margin:0 0 10px; color:var(--tw-text-muted); font-weight:600; letter-spacing:0.04em; text-transform:uppercase; }[data-tw-domain="family"][data-tw-page="memory-detail"] .continuity-threads-intro { font-size:14px; color:var(--tw-text-muted); margin:0 0 14px; line-height:1.5; }[data-tw-domain="family"][data-tw-page="memory-detail"] .continuity-thread-group { margin-bottom:16px; }[data-tw-domain="family"][data-tw-page="memory-detail"] .continuity-thread-context { font-size:13px; color:var(--tw-text-muted); margin:0 0 8px; line-height:1.45; }[data-tw-domain="family"][data-tw-page="memory-detail"] .continuity-thread-list { list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:8px; }[data-tw-domain="family"][data-tw-page="memory-detail"] .continuity-thread-list a { color:var(--tw-action-primary); text-decoration:none; font-size:14px; line-height:1.45; }[data-tw-domain="family"][data-tw-page="memory-detail"] .continuity-thread-list a:hover { text-decoration:underline; }[data-tw-domain="family"][data-tw-page="memory-detail"] .atmosphere-cues { margin:0 0 14px; max-width:720px; }[data-tw-domain="family"][data-tw-page="memory-detail"] .atmosphere-cue { font-size:13px; line-height:1.5; color:var(--tw-text-muted); margin:0 0 6px; font-style:normal; }[data-tw-domain="family"][data-tw-page="memory-detail"] .shared-presence-cue { font-size:13px; line-height:1.5; color:var(--tw-text-muted); margin:0 0 12px; max-width:720px; font-style:normal; }[data-tw-domain="family"][data-tw-page="memory-detail"] .reflection-intro { font-size:13px; color:var(--tw-text-muted); margin:0 0 12px; line-height:1.5; max-width:720px; }[data-tw-domain="family"][data-tw-page="memory-detail"] .muted-sm { opacity:0.92; }[data-tw-domain="family"][data-tw-page="memory-detail"] .error { color:var(--tw-system-error); font-size:13px; margin-top:6px; }[data-tw-domain="family"][data-tw-page="memory-detail"] .submit { display:inline-flex; align-items:center; justify-content:center; border:1px solid var(--tw-atmosphere-fade); background:var(--tw-atmosphere-fade); color:var(--tw-text-primary); border-radius:10px; padding:10px 14px; font:inherit; cursor:pointer; }[data-tw-domain="family"][data-tw-page="memory-detail"] .banner-warn { background:var(--tw-atmosphere-fade); border:1px solid var(--tw-atmosphere-fade); color:var(--tw-text-memory); }[data-tw-domain="family"][data-tw-page="memory-detail"] .gallery-open { margin-top:12px; font-size:14px; color:var(--tw-action-primary); background:transparent; border:none; padding:0; cursor:pointer; text-decoration:underline; }[data-tw-domain="family"][data-tw-page="memory-detail"] .gallery-modal { position:fixed; inset:0; z-index:40; display:none; align-items:center; justify-content:center; background:var(--tw-atmosphere-fade); padding:16px; }[data-tw-domain="family"][data-tw-page="memory-detail"] .gallery-modal.open { display:flex; }[data-tw-domain="family"][data-tw-page="memory-detail"] .gallery-panel { max-width:min(96vw,720px); width:100%; display:flex; flex-direction:column; gap:12px; }[data-tw-domain="family"][data-tw-page="memory-detail"] .gallery-panel img { width:100%; max-height:70vh; object-fit:contain; border-radius:12px; background:var(--bg-0); }[data-tw-domain="family"][data-tw-page="memory-detail"] .gallery-toolbar { display:flex; flex-wrap:wrap; gap:10px; align-items:center; justify-content:space-between; }[data-tw-domain="family"][data-tw-page="memory-detail"] .gallery-nav { display:flex; gap:10px; flex-wrap:wrap; }[data-tw-domain="family"][data-tw-page="memory-detail"] .gallery-nav button { min-height:44px; min-width:44px; padding:10px 14px; }
    @media (max-width:480px) {[data-tw-domain="family"][data-tw-page="memory-detail"] body { padding:16px 12px 28px; }[data-tw-domain="family"][data-tw-page="memory-detail"] h1 { font-size:1.25rem; }[data-tw-domain="family"][data-tw-page="memory-detail"] .texture-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }[data-tw-domain="family"][data-tw-page="memory-detail"] .texture-grid img { height: 100px; }[data-tw-domain="family"][data-tw-page="memory-detail"] .body, [data-tw-domain="family"][data-tw-page="memory-detail"] .connected-memories, [data-tw-domain="family"][data-tw-page="memory-detail"] .reflections { max-width:100%; }[data-tw-domain="family"][data-tw-page="memory-detail"] .submit, [data-tw-domain="family"][data-tw-page="memory-detail"] .ghost-btn { min-height:44px; }
    }


/* ── memory_edit.html → data-tw-page="memory-edit" ── */

[data-tw-domain="family"][data-tw-page="memory-edit"] * { box-sizing: border-box; }[data-tw-domain="family"][data-tw-page="memory-edit"] body {
      margin: 0; min-height: 100vh;
      font-family: "Segoe UI", "Helvetica Neue", -apple-system, system-ui, sans-serif;
      color: var(--tw-text-primary);
      background: linear-gradient(155deg, var(--bg-0) 0%, var(--bg-1) 100%);
      padding: 24px 18px 48px;
    }[data-tw-domain="family"][data-tw-page="memory-edit"] .wrap { max-width: 640px; margin: 0 auto; }[data-tw-domain="family"][data-tw-page="memory-edit"] .back { display: inline-block; margin-bottom: 20px; font-size: 13px; color: var(--tw-text-muted); text-decoration: none; }[data-tw-domain="family"][data-tw-page="memory-edit"] .back:hover { color: var(--tw-text-primary); }[data-tw-domain="family"][data-tw-page="memory-edit"] h1 { margin: 0 0 8px; font-size: 1.4rem; font-weight: 700; }[data-tw-domain="family"][data-tw-page="memory-edit"] .sub { margin: 0 0 12px; color: var(--tw-text-muted); font-size: 14px; }[data-tw-domain="family"][data-tw-page="memory-edit"] .page-hint {
      margin: 0 0 20px;
      padding: 12px 14px;
      border-radius: 12px;
      border: 1px solid var(--tw-atmosphere-warm);
      background: var(--tw-atmosphere-fade);
      color: var(--tw-text-memory);
      font-size: 14px;
      line-height: 1.45;
    }[data-tw-domain="family"][data-tw-page="memory-edit"] .card {
      border: 1px solid var(--tw-border-soft);
      border-radius: 20px;
      padding: 20px 20px 18px;
      background: var(--tw-surface-primary);
    }[data-tw-domain="family"][data-tw-page="memory-edit"] .layer { margin-bottom: 20px; }[data-tw-domain="family"][data-tw-page="memory-edit"] .layer:last-of-type { margin-bottom: 0; }[data-tw-domain="family"][data-tw-page="memory-edit"] .layer-title {
      margin: 0 0 4px;
      font-size: 0.8rem;
      font-weight: 700;
      letter-spacing: 0.06em;
      text-transform: uppercase;
      color: var(--tw-text-memory);
    }[data-tw-domain="family"][data-tw-page="memory-edit"] .layer-sub {
      margin: 0 0 10px;
      font-size: 12px;
      line-height: 1.4;
      color: var(--tw-text-muted);
    }[data-tw-domain="family"][data-tw-page="memory-edit"] label { display: block; font-size: 11px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--tw-text-muted); margin-bottom: 6px; }[data-tw-domain="family"][data-tw-page="memory-edit"] .field { margin-bottom: 0; }[data-tw-domain="family"][data-tw-page="memory-edit"] textarea {
      width: 100%;
      min-height: 100px;
      background: var(--tw-atmosphere-fade);
      color: var(--tw-text-primary);
      border: 1px solid var(--tw-border-soft);
      border-radius: 12px;
      padding: 12px 14px;
      font-size: 14px; line-height: 1.5;
      font-family: inherit;
      resize: vertical;
    }[data-tw-domain="family"][data-tw-page="memory-edit"] textarea.essence { min-height: 72px; max-height: 200px; }[data-tw-domain="family"][data-tw-page="memory-edit"] textarea.locked {
      background: var(--tw-atmosphere-fade);
      color: var(--tw-text-secondary);
      border-color: var(--tw-atmosphere-fade);
      cursor: not-allowed;
    }[data-tw-domain="family"][data-tw-page="memory-edit"] textarea:focus:not(.locked) { outline: none; border-color: var(--tw-atmosphere-fade); }[data-tw-domain="family"][data-tw-page="memory-edit"] .read-tools {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      gap: 8px 12px;
      margin-top: 8px;
    }[data-tw-domain="family"][data-tw-page="memory-edit"] .btn-para {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      padding: 8px 14px;
      font-size: 13px;
      font-weight: 600;
      border-radius: 10px;
      border: 1px solid var(--tw-atmosphere-fade);
      background: var(--tw-atmosphere-fade);
      color: var(--tw-text-secondary);
      cursor: pointer;
    }[data-tw-domain="family"][data-tw-page="memory-edit"] .btn-para:hover { border-color: var(--tw-atmosphere-fade); color: var(--tw-text-primary); }[data-tw-domain="family"][data-tw-page="memory-edit"] .btn-para:disabled { opacity: 0.45; cursor: not-allowed; }[data-tw-domain="family"][data-tw-page="memory-edit"] .read-tools-hint { font-size: 12px; color: var(--whisper); margin: 0; }[data-tw-domain="family"][data-tw-page="memory-edit"] .actions { display: flex; flex-wrap: wrap; gap: 12px 20px; align-items: center; margin-top: 20px; }[data-tw-domain="family"][data-tw-page="memory-edit"] .actions button[type="submit"] {
      background: var(--tw-action-primary);
      color: var(--tw-action-primary-text);
      border: none;
      border-radius: 12px;
      padding: 12px 22px;
      font-size: 15px; font-weight: 600;
      cursor: pointer;
    }[data-tw-domain="family"][data-tw-page="memory-edit"] .actions button[type="submit"]:hover { filter: brightness(1.04); }[data-tw-domain="family"][data-tw-page="memory-edit"] a.cancel { font-size: 14px; color: var(--tw-text-muted); text-decoration: none; font-weight: 500; }[data-tw-domain="family"][data-tw-page="memory-edit"] a.cancel:hover { color: var(--tw-text-secondary); text-decoration: underline; }


/* ── memory_new.html → data-tw-page="memory-new" ── */

[data-tw-domain="family"][data-tw-page="memory-new"] * { box-sizing: border-box; }[data-tw-domain="family"][data-tw-page="memory-new"] body {
      margin: 0; min-height: 100vh;
      font-family: "Segoe UI", "Helvetica Neue", -apple-system, system-ui, sans-serif;
      color: var(--tw-text-primary);
      background: linear-gradient(155deg, var(--bg-0) 0%, var(--bg-1) 100%);
      padding: 24px 18px 48px;
    }[data-tw-domain="family"][data-tw-page="memory-new"] .wrap { max-width: 640px; margin: 0 auto; }[data-tw-domain="family"][data-tw-page="memory-new"] .back { display: inline-block; margin-bottom: 20px; font-size: 13px; color: var(--tw-text-muted); text-decoration: none; }[data-tw-domain="family"][data-tw-page="memory-new"] .back:hover { color: var(--tw-text-primary); }[data-tw-domain="family"][data-tw-page="memory-new"] h1 { margin: 0 0 8px; font-size: 1.4rem; font-weight: 700; }[data-tw-domain="family"][data-tw-page="memory-new"] .sub { margin: 0 0 12px; color: var(--tw-text-muted); font-size: 14px; }[data-tw-domain="family"][data-tw-page="memory-new"] .page-err {
      margin: 0 0 16px;
      padding: 10px 14px;
      border-radius: 12px;
      border: 1px solid var(--tw-atmosphere-fade);
      background: var(--tw-atmosphere-fade);
      color: var(--tw-system-error);
      font-size: 14px;
    }[data-tw-domain="family"][data-tw-page="memory-new"] .card {
      border: 1px solid var(--tw-border-soft);
      border-radius: 20px;
      padding: 20px 20px 18px;
      background: var(--tw-surface-primary);
    }[data-tw-domain="family"][data-tw-page="memory-new"] .layer { margin-bottom: 20px; }[data-tw-domain="family"][data-tw-page="memory-new"] .layer:last-of-type { margin-bottom: 0; }[data-tw-domain="family"][data-tw-page="memory-new"] .layer-title {
      margin: 0 0 4px;
      font-size: 0.8rem;
      font-weight: 700;
      letter-spacing: 0.06em;
      text-transform: uppercase;
      color: var(--tw-text-memory);
    }[data-tw-domain="family"][data-tw-page="memory-new"] .layer-sub { margin: 0 0 10px; font-size: 12px; line-height: 1.4; color: var(--tw-text-muted); }[data-tw-domain="family"][data-tw-page="memory-new"] label { display: block; font-size: 11px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--tw-text-muted); margin-bottom: 6px; }[data-tw-domain="family"][data-tw-page="memory-new"] textarea {
      width: 100%;
      min-height: 120px;
      background: var(--tw-atmosphere-fade);
      color: var(--tw-text-primary);
      border: 1px solid var(--tw-border-soft);
      border-radius: 12px;
      padding: 12px 14px;
      font-size: 14px; line-height: 1.5;
      font-family: inherit;
      resize: vertical;
    }[data-tw-domain="family"][data-tw-page="memory-new"] textarea.essence { min-height: 72px; max-height: 200px; }[data-tw-domain="family"][data-tw-page="memory-new"] textarea:focus { outline: none; border-color: var(--tw-atmosphere-fade); }[data-tw-domain="family"][data-tw-page="memory-new"] .read-tools { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin-top: 8px; }[data-tw-domain="family"][data-tw-page="memory-new"] .btn-para {
      display: inline-flex; align-items: center; justify-content: center;
      padding: 8px 14px; font-size: 13px; font-weight: 600;
      border-radius: 10px; border: 1px solid var(--tw-atmosphere-fade);
      background: var(--tw-atmosphere-fade);
      color: var(--tw-text-secondary); cursor: pointer;
    }[data-tw-domain="family"][data-tw-page="memory-new"] .btn-para:hover { border-color: var(--tw-atmosphere-fade); color: var(--tw-text-primary); }[data-tw-domain="family"][data-tw-page="memory-new"] .read-tools-hint { font-size: 12px; color: var(--whisper); margin: 0; }[data-tw-domain="family"][data-tw-page="memory-new"] .actions { display: flex; flex-wrap: wrap; gap: 12px 20px; align-items: center; margin-top: 20px; }[data-tw-domain="family"][data-tw-page="memory-new"] .actions button[type="submit"] {
      background: var(--tw-action-primary);
      color: var(--tw-action-primary-text);
      border: none;
      border-radius: 12px;
      padding: 12px 22px;
      font-size: 15px; font-weight: 600;
      cursor: pointer;
    }[data-tw-domain="family"][data-tw-page="memory-new"] .actions button[type="submit"]:hover { filter: brightness(1.04); }[data-tw-domain="family"][data-tw-page="memory-new"] a.cancel { font-size: 14px; color: var(--tw-text-muted); text-decoration: none; font-weight: 500; }[data-tw-domain="family"][data-tw-page="memory-new"] a.cancel:hover { color: var(--tw-text-secondary); text-decoration: underline; }


/* ── need_family_access.html → data-tw-page="need-family-access" ── */

[data-tw-domain="family"][data-tw-page="need-family-access"] * { box-sizing: border-box; }[data-tw-domain="family"][data-tw-page="need-family-access"] body {
      margin: 0;
      min-height: 100vh;
      font-family: "Segoe UI", system-ui, sans-serif;
      color: var(--tw-text-primary);
      background:
        radial-gradient(900px 500px at 10% 0%, var(--tw-atmosphere-fade), transparent 55%),
        linear-gradient(150deg, var(--bg-0) 0%, var(--bg-1) 100%);
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 24px;
    }[data-tw-domain="family"][data-tw-page="need-family-access"] .card {
      max-width: 520px;
      width: 100%;
      border: 1px solid var(--tw-border-soft);
      border-radius: 20px;
      padding: 28px;
      background: var(--tw-atmosphere-fade);
      box-shadow: 0 20px 50px var(--tw-atmosphere-fade);
    }[data-tw-domain="family"][data-tw-page="need-family-access"] h1 {
      font-size: 1.35rem;
      margin: 0 0 12px;
      color: var(--tw-action-primary);
    }[data-tw-domain="family"][data-tw-page="need-family-access"] p { margin: 0 0 14px; line-height: 1.55; color: var(--tw-text-primary); }[data-tw-domain="family"][data-tw-page="need-family-access"] .hint { color: var(--tw-text-muted); font-size: 0.95rem; }


/* ── person_card.html → data-tw-page="person-card" ── */

[data-tw-domain="family"][data-tw-page="person-card"] * { box-sizing: border-box; margin: 0; padding: 0; }[data-tw-domain="family"][data-tw-page="person-card"] body {
      font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
      background: radial-gradient(circle at top, var(--bg-0), var(--tw-surface-primary));
      color: var(--tw-text-primary);
      min-height: 100vh;
      padding: 32px 24px;
    }[data-tw-domain="family"][data-tw-page="person-card"] .container { max-width: 680px; margin: 0 auto; }[data-tw-domain="family"][data-tw-page="person-card"] .header {
      display: flex;
      gap: 24px;
      align-items: center;
      margin-bottom: 32px;
    }[data-tw-domain="family"][data-tw-page="person-card"] .avatar {
      width: 96px; height: 96px;
      border-radius: 999px;
      object-fit: cover;
      border: 2px solid var(--tw-atmosphere-fade);
      flex-shrink: 0;
    }[data-tw-domain="family"][data-tw-page="person-card"] .avatar-fallback {
      width: 96px; height: 96px;
      border-radius: 999px;
      background: var(--tw-atmosphere-fade);
      display: grid; place-items: center;
      color: var(--tw-text-muted); font-size: 13px;
      flex-shrink: 0;
    }[data-tw-domain="family"][data-tw-page="person-card"] .header-info h1 { font-size: 24px; font-weight: 700; margin-bottom: 6px; }[data-tw-domain="family"][data-tw-page="person-card"] .header-actions { margin-top: 12px; }[data-tw-domain="family"][data-tw-page="person-card"] .meta { font-size: 13px; color: var(--tw-text-muted); display: flex; gap: 12px; flex-wrap: wrap; }[data-tw-domain="family"][data-tw-page="person-card"] .meta span { display: flex; align-items: center; gap: 4px; }[data-tw-domain="family"][data-tw-page="person-card"] .dot { color: var(--tw-action-primary); }[data-tw-domain="family"][data-tw-page="person-card"] .graph-chip {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      padding: 9px 13px;
      border-radius: 999px;
      border: 1px solid var(--border);
      background: var(--tw-atmosphere-fade);
      color: var(--tw-text-primary);
      text-decoration: none;
      font-size: 13px;
      font-weight: 600;
      transition: background .2s, border-color .2s, transform .2s;
    }[data-tw-domain="family"][data-tw-page="person-card"] .graph-chip:hover {
      background: var(--tw-atmosphere-fade);
      border-color: var(--tw-atmosphere-fade);
      transform: translateY(-1px);
    }[data-tw-domain="family"][data-tw-page="person-card"] .graph-chip svg {
      width: 16px;
      height: 16px;
      flex-shrink: 0;
    }[data-tw-domain="family"][data-tw-page="person-card"] .section-title {
      font-size: 13px;
      text-transform: uppercase;
      letter-spacing: .08em;
      color: var(--tw-text-muted);
      margin-bottom: 14px;
    }[data-tw-domain="family"][data-tw-page="person-card"] .section { margin-bottom: 32px; }[data-tw-domain="family"][data-tw-page="person-card"] .memory-text {
      font-size: 14px;
      line-height: 1.6;
      margin-bottom: 10px;
      display: -webkit-box;
      -webkit-line-clamp: 4;
      -webkit-box-orient: vertical;
      overflow: hidden;
    }[data-tw-domain="family"][data-tw-page="person-card"] .memory-date { font-size: 12px; color: var(--tw-text-muted); margin-bottom: 10px; }[data-tw-domain="family"][data-tw-page="person-card"] audio { width: 100%; border-radius: 8px; }[data-tw-domain="family"][data-tw-page="person-card"] .empty { color: var(--tw-text-muted); font-size: 14px; padding: 8px 0; }[data-tw-domain="family"][data-tw-page="person-card"] .back-link {
      display: inline-block;
      margin-bottom: 24px;
      font-size: 13px;
      color: var(--tw-text-muted);
      text-decoration: none;
    }[data-tw-domain="family"][data-tw-page="person-card"] .back-link:hover { color: var(--tw-text-primary); }


/* ── pin_form.html → data-tw-page="pin-form" ── */

[data-tw-domain="family"][data-tw-page="pin-form"] * { box-sizing: border-box; margin: 0; padding: 0; }[data-tw-domain="family"][data-tw-page="pin-form"] body {
      font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
      background: radial-gradient(circle at top, var(--bg-0), var(--tw-surface-primary));
      color: var(--tw-text-primary);
      min-height: 100vh;
      display: grid;
      place-items: center;
      padding: 24px;
    }[data-tw-domain="family"][data-tw-page="pin-form"] .card {
      width: min(100%, 380px);
      background: var(--tw-atmosphere-fade);
      border-radius: 24px;
      border: 1px solid var(--border);
      padding: 36px 28px;
      box-shadow: 0 20px 60px var(--tw-atmosphere-fade);
      text-align: center;
    }[data-tw-domain="family"][data-tw-page="pin-form"] .avatar {
      width: 80px; height: 80px;
      border-radius: 999px;
      object-fit: cover;
      border: 2px solid var(--tw-atmosphere-fade);
      margin-bottom: 16px;
    }[data-tw-domain="family"][data-tw-page="pin-form"] .avatar-fallback {
      width: 80px; height: 80px;
      border-radius: 999px;
      background: var(--tw-atmosphere-fade);
      display: grid; place-items: center;
      color: var(--tw-text-muted); font-size: 12px;
      margin: 0 auto 16px;
    }[data-tw-domain="family"][data-tw-page="pin-form"] h1 { font-size: 20px; font-weight: 700; margin-bottom: 6px; }[data-tw-domain="family"][data-tw-page="pin-form"] .subtitle { color: var(--tw-text-muted); font-size: 14px; margin-bottom: 24px; }[data-tw-domain="family"][data-tw-page="pin-form"] .error {
      background: var(--tw-atmosphere-fade);
      border: 1px solid var(--tw-atmosphere-fade);
      color: var(--error);
      border-radius: 10px;
      padding: 10px 14px;
      font-size: 13px;
      margin-bottom: 16px;
    }[data-tw-domain="family"][data-tw-page="pin-form"] .pin-input {
      width: 100%;
      text-align: center;
      font-size: 28px;
      letter-spacing: 8px;
      padding: 14px;
      border-radius: 14px;
      border: 1px solid var(--border);
      background: var(--tw-atmosphere-fade);
      color: var(--tw-text-primary);
      margin-bottom: 16px;
    }[data-tw-domain="family"][data-tw-page="pin-form"] .pin-input:focus { outline: none; border-color: var(--tw-action-primary); }[data-tw-domain="family"][data-tw-page="pin-form"] .btn {
      width: 100%;
      background: var(--tw-action-primary);
      color: var(--tw-action-primary-text);
      border: none;
      border-radius: 14px;
      padding: 14px;
      font-size: 15px;
      font-weight: 600;
      cursor: pointer;
      margin-bottom: 12px;
    }[data-tw-domain="family"][data-tw-page="pin-form"] .back-link {
      display: block;
      font-size: 13px;
      color: var(--tw-text-muted);
      text-decoration: none;
      margin-top: 8px;
    }[data-tw-domain="family"][data-tw-page="pin-form"] .back-link:hover { color: var(--tw-text-primary); }


/* ── profile.html → data-tw-page="profile" ── */

[data-tw-domain="family"][data-tw-page="profile"] * { box-sizing: border-box; }[data-tw-domain="family"][data-tw-page="profile"] body {
      margin: 0;
      min-height: 100vh;
      font-family: "Segoe UI", "Helvetica Neue", -apple-system, system-ui, sans-serif;
      color: var(--tw-text-primary);
      background:
        radial-gradient(1200px 500px at 8% -8%, var(--tw-atmosphere-warm), transparent 58%),
        radial-gradient(900px 420px at 95% 0%, var(--tw-atmosphere-depth), transparent 55%),
        linear-gradient(155deg, var(--bg-0) 0%, var(--bg-1) 100%);
      padding: 24px 18px 48px;
    }[data-tw-domain="family"][data-tw-page="profile"] a { color: var(--tw-action-primary); }[data-tw-domain="family"][data-tw-page="profile"] .wrap { max-width: 880px; margin: 0 auto; }[data-tw-domain="family"][data-tw-page="profile"] .back-link {
      display: inline-block;
      margin-bottom: 20px;
      font-size: 13px;
      color: var(--tw-text-muted);
      text-decoration: none;
    }[data-tw-domain="family"][data-tw-page="profile"] .back-link:hover { color: var(--tw-text-primary); }[data-tw-domain="family"][data-tw-page="profile"] .person-head {
      display: flex;
      flex-direction: column;
      align-items: center;
      text-align: center;
      gap: 14px;
    }
    @media (min-width: 640px) {[data-tw-domain="family"][data-tw-page="profile"] .person-head { flex-direction: row; align-items: flex-start; text-align: left; }
    }[data-tw-domain="family"][data-tw-page="profile"] .avatar-wrap { flex-shrink: 0; }[data-tw-domain="family"][data-tw-page="profile"] .avatar {
      width: 96px; height: 96px; border-radius: 999px; object-fit: cover;
      border: 2px solid var(--tw-border-memory);
      display: block;
      box-shadow: 0 4px 20px var(--tw-memory-depth);
    }[data-tw-domain="family"][data-tw-page="profile"] .avatar-fallback {
      width: 96px; height: 96px; border-radius: 999px;
      background: var(--tw-surface-tertiary);
      display: grid; place-items: center; color: var(--tw-text-muted); font-size: 12px;
    }[data-tw-domain="family"][data-tw-page="profile"] .hero-text { flex: 1; min-width: 0; }[data-tw-domain="family"][data-tw-page="profile"] h1 {
      margin: 0 0 4px;
      font-size: clamp(28px, 4.2vw, 42px);
      line-height: 1.08;
      font-weight: 700;
      letter-spacing: -0.02em;
    }[data-tw-domain="family"][data-tw-page="profile"] .hero-sub {
      margin: 0;
      color: var(--tw-text-secondary);
      font-size: 15px;
      line-height: 1.5;
      max-width: 50ch;
      font-weight: 400;
    }[data-tw-domain="family"][data-tw-page="profile"] .hero-text > .hero-sub { margin-top: 8px; }[data-tw-domain="family"][data-tw-page="profile"] .hero-kicker {
      text-align: center;
      font-size: 15px;
      color: var(--tw-text-secondary);
      line-height: 1.45;
      margin: 6px 0 0 0;
      max-width: 52ch;
    }
    @media (min-width: 640px) {[data-tw-domain="family"][data-tw-page="profile"] .hero-kicker { text-align: left; }
    }[data-tw-domain="family"][data-tw-page="profile"] .hero-metrics-hint {
      text-align: center;
      font-size: 12px;
      color: var(--tw-text-muted);
      line-height: 1.4;
      margin: 16px 0 0 0;
      padding-top: 16px;
      border-top: 1px solid var(--tw-border-soft);
    }
    @media (min-width: 640px) {[data-tw-domain="family"][data-tw-page="profile"] .hero-metrics-hint { text-align: left; }
    }[data-tw-domain="family"][data-tw-page="profile"] .hero-stats {
      list-style: none;
      margin: 10px 0 0 0;
      padding: 0;
      display: grid;
      grid-template-columns: 1fr;
      gap: 10px 12px;
    }
    @media (min-width: 480px) {[data-tw-domain="family"][data-tw-page="profile"] .hero-stats { grid-template-columns: repeat(3, 1fr); gap: 8px 12px; }
    }[data-tw-domain="family"][data-tw-page="profile"] .hero-stat {
      text-align: center;
      padding: 10px 10px 12px;
      border-radius: 14px;
      background: var(--tw-memory-depth);
      border: 1px solid var(--tw-atmosphere-fade);
    }
    @media (min-width: 640px) {[data-tw-domain="family"][data-tw-page="profile"] .hero-stat { text-align: left; padding: 10px 12px; }
    }[data-tw-domain="family"][data-tw-page="profile"] .hero-stat-line {
      font-size: 15px;
      font-weight: 600;
      color: var(--tw-text-secondary);
      line-height: 1.3;
    }[data-tw-domain="family"][data-tw-page="profile"] .hero-stat-kicker {
      font-size: 12px;
      color: var(--tw-text-muted);
      line-height: 1.3;
      margin: 0 0 4px 0;
    }[data-tw-domain="family"][data-tw-page="profile"] .hero-stat-hint {
      font-size: 12px;
      color: var(--whisper);
      line-height: 1.35;
      margin: 6px 0 0 0;
    }[data-tw-domain="family"][data-tw-page="profile"] .person-cta {
      display: flex;
      flex-direction: column;
      gap: 10px;
      margin-top: 20px;
      padding-top: 4px;
      justify-content: center;
      position: relative;
      z-index: 1;
    }[data-tw-domain="family"][data-tw-page="profile"] .person-cta a {
      position: relative;
      z-index: 2;
      pointer-events: auto;
    }
    @media (min-width: 480px) {[data-tw-domain="family"][data-tw-page="profile"] .person-cta { flex-direction: row; flex-wrap: wrap; }
    }
    @media (min-width: 640px) {[data-tw-domain="family"][data-tw-page="profile"] .person-cta { justify-content: flex-start; }
    }[data-tw-domain="family"][data-tw-page="profile"] .btn {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      padding: 12px 20px;
      border-radius: 12px;
      font-size: 15px;
      font-weight: 600;
      text-decoration: none;
      border: 1px solid var(--tw-border-soft);
      cursor: pointer;
      transition: background .2s, border-color .2s, transform .15s;
    }[data-tw-domain="family"][data-tw-page="profile"] .btn-primary:hover { filter: brightness(1.05); transform: translateY(-1px); }[data-tw-domain="family"][data-tw-page="profile"] .btn-ghost {
      background: var(--tw-atmosphere-fade);
      color: var(--tw-text-primary);
    }[data-tw-domain="family"][data-tw-page="profile"] .btn-ghost:hover { border-color: var(--tw-atmosphere-fade); background: var(--tw-atmosphere-fade); }[data-tw-domain="family"][data-tw-page="profile"] .section {
      border: 1px solid var(--tw-border-soft);
      border-radius: 20px;
      background: var(--tw-surface-primary);
      padding: 20px 20px 18px;
      margin-bottom: 16px;
    }[data-tw-domain="family"][data-tw-page="profile"] .section h2 {
      margin: 0 0 4px;
      font-size: 1.1rem;
      font-weight: 700;
      color: var(--tw-text-memory);
    }[data-tw-domain="family"][data-tw-page="profile"] .section p.lead { margin: 0 0 14px; font-size: 13px; color: var(--tw-text-muted); line-height: 1.45; }[data-tw-domain="family"][data-tw-page="profile"] .empty-box {
      border-radius: 16px;
      padding: 20px 18px;
      background: var(--tw-atmosphere-fade);
      border: 1px dashed var(--tw-atmosphere-fade);
    }[data-tw-domain="family"][data-tw-page="profile"] .empty-box h3 { margin: 0 0 8px; font-size: 16px; font-weight: 600; color: var(--tw-text-secondary); }[data-tw-domain="family"][data-tw-page="profile"] .empty-box p { margin: 0; font-size: 14px; line-height: 1.5; color: var(--tw-text-muted); }[data-tw-domain="family"][data-tw-page="profile"] .time-group { margin-top: 16px; }[data-tw-domain="family"][data-tw-page="profile"] .time-group:first-child { margin-top: 0; }[data-tw-domain="family"][data-tw-page="profile"] .time-year {
      font-size: 12px;
      font-weight: 700;
      color: var(--whisper);
      letter-spacing: 0.12em;
      text-transform: uppercase;
      margin: 0 0 10px 2px;
    }[data-tw-domain="family"][data-tw-page="profile"] .card-list { display: flex; flex-direction: column; gap: 10px; }[data-tw-domain="family"][data-tw-page="profile"] .timeline {
      position: relative;
      margin-top: 4px;
      padding-left: 44px;
    }[data-tw-domain="family"][data-tw-page="profile"] .timeline::before {
      content: "";
      position: absolute;
      left: 24px;
      top: 0;
      bottom: 0;
      width: 2px;
      background: var(--tw-atmosphere-fade);
      border-radius: 1px;
    }[data-tw-domain="family"][data-tw-page="profile"] .timeline .time-group { position: relative; z-index: 0; }[data-tw-domain="family"][data-tw-page="profile"] .timeline .time-year { padding-left: 0; }[data-tw-domain="family"][data-tw-page="profile"] .timeline .card-list { gap: 12px; }[data-tw-domain="family"][data-tw-page="profile"] .m-card, [data-tw-domain="family"][data-tw-page="profile"] .own-card {
      border: 1px solid var(--tw-atmosphere-fade);
      border-radius: 16px;
      padding: 14px 16px 12px;
      background: var(--tw-atmosphere-fade);
    }[data-tw-domain="family"][data-tw-page="profile"] .own-card.timeline-item {
      position: relative;
      z-index: 1;
    }[data-tw-domain="family"][data-tw-page="profile"] .own-card.timeline-item::after {
      content: "";
      position: absolute;
      width: 9px;
      height: 9px;
      border-radius: 50%;
      left: -23.5px;
      top: 2.55rem;
      transform: translateY(-50%);
      background: var(--tw-action-primary);
      box-shadow: 0 0 0 2px var(--tw-atmosphere-fade);
    }[data-tw-domain="family"][data-tw-page="profile"] .own-card-top {
      display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 6px;
      margin-bottom: 6px; width: 100%;
    }[data-tw-domain="family"][data-tw-page="profile"] .own-kind {
      font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em;
      color: var(--tw-action-primary); background: var(--tw-atmosphere-fade); border-radius: 6px; padding: 3px 7px;
    }[data-tw-domain="family"][data-tw-page="profile"] .own-meta-sep { font-size: 12px; color: var(--whisper); user-select: none; }[data-tw-domain="family"][data-tw-page="profile"] .own-date-integrated { font-size: 12px; color: var(--tw-text-muted); font-variant-numeric: tabular-nums; }[data-tw-domain="family"][data-tw-page="profile"] .own-title {
      font-size: 16px; font-weight: 700; color: var(--tw-text-primary); margin: 0; line-height: 1.35;
      flex: 1; min-width: 0;
      display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
    }[data-tw-domain="family"][data-tw-page="profile"] .own-audio-hint { font-size: 12px; color: var(--whisper); }[data-tw-domain="family"][data-tw-page="profile"] .own-preview {
      font-size: 14px; line-height: 1.45; color: var(--tw-text-muted);
      display: -webkit-box;
      -webkit-line-clamp: 2;
      -webkit-box-orient: vertical;
      overflow: hidden;
      margin: 8px 0 0 0;
    }[data-tw-domain="family"][data-tw-page="profile"] .own-actions { margin-top: 12px; display: flex; flex-wrap: wrap; gap: 0 0; align-items: center; }[data-tw-domain="family"][data-tw-page="profile"] .own-actions .own-audio-hint { margin-left: 4px; }[data-tw-domain="family"][data-tw-page="profile"] .own-actions-sep { color: var(--whisper); user-select: none; padding: 0 6px; font-weight: 500; }[data-tw-domain="family"][data-tw-page="profile"] .own-actions a.own-link--primary { font-size: 14px; font-weight: 600; text-decoration: none; color: var(--tw-action-primary); }[data-tw-domain="family"][data-tw-page="profile"] .own-actions a.own-link--primary:hover { text-decoration: underline; }[data-tw-domain="family"][data-tw-page="profile"] .own-actions a.own-link--secondary { font-size: 14px; font-weight: 500; text-decoration: none; color: var(--tw-text-muted); }[data-tw-domain="family"][data-tw-page="profile"] .own-actions a.own-link--secondary:hover { text-decoration: underline; color: var(--tw-text-secondary); }[data-tw-domain="family"][data-tw-page="profile"] .m-card .excerpt { font-size: 14px; line-height: 1.5; color: var(--tw-text-secondary); }[data-tw-domain="family"][data-tw-page="profile"] .m-meta { font-size: 12px; color: var(--tw-text-muted); margin-top: 8px; }[data-tw-domain="family"][data-tw-page="profile"] .m-meta a { text-decoration: none; font-weight: 600; }[data-tw-domain="family"][data-tw-page="profile"] .m-meta a:hover { text-decoration: underline; }[data-tw-domain="family"][data-tw-page="profile"] .empty { color: var(--tw-text-muted); font-size: 14px; line-height: 1.5; padding: 4px 0; }[data-tw-domain="family"][data-tw-page="profile"] .photo-panel {
      border: 1px solid var(--tw-border-soft);
      border-radius: 22px;
      background: var(--tw-surface-primary);
      padding: 20px 20px 18px;
      margin-top: 8px;
    }[data-tw-domain="family"][data-tw-page="profile"] .photo-panel h3 { margin: 0 0 4px; font-size: 17px; font-weight: 700; color: var(--tw-text-memory); }[data-tw-domain="family"][data-tw-page="profile"] .photo-panel .lead { margin: 0 0 16px; font-size: 14px; color: var(--tw-text-muted); line-height: 1.45; }[data-tw-domain="family"][data-tw-page="profile"] .photo-pair {
      display: flex;
      flex-direction: column;
      gap: 16px;
      margin-bottom: 16px;
    }
    @media (min-width: 520px) {[data-tw-domain="family"][data-tw-page="profile"] .photo-pair { flex-direction: row; align-items: flex-start; }
    }[data-tw-domain="family"][data-tw-page="profile"] .photo-current {
      width: 88px; height: 88px; border-radius: 16px; object-fit: cover;
      border: 2px solid var(--tw-atmosphere-fade);
      background: var(--tw-memory-depth);
    }[data-tw-domain="family"][data-tw-page="profile"] .photo-preview-hint { font-size: 12px; color: var(--whisper); margin: 0 0 6px; }[data-tw-domain="family"][data-tw-page="profile"] #avatar-preview-crop { width: 88px; height: 88px; border-radius: 16px; overflow: hidden; border: 1px dashed var(--tw-border-soft); display: none; background: var(--tw-atmosphere-fade); }[data-tw-domain="family"][data-tw-page="profile"] #avatar-preview-crop.has-img { display: block; border-style: solid; }[data-tw-domain="family"][data-tw-page="profile"] #avatar-preview-crop img { width: 100%; height: 100%; object-fit: cover; }[data-tw-domain="family"][data-tw-page="profile"] .dropzone {
      flex: 1; min-width: 0;
      border: 1px dashed var(--tw-atmosphere-fade);
      border-radius: 14px;
      padding: 16px 14px;
      text-align: center;
      cursor: pointer;
      color: var(--tw-text-muted);
      font-size: 14px;
      line-height: 1.45;
      transition: border-color .2s, color .2s, background .2s;
    }[data-tw-domain="family"][data-tw-page="profile"] .dropzone:hover { border-color: var(--tw-border-memory); color: var(--tw-text-secondary); background: var(--tw-atmosphere-fade); }[data-tw-domain="family"][data-tw-page="profile"] .dropzone strong { color: var(--tw-text-memory); }[data-tw-domain="family"][data-tw-page="profile"] input[type="file"] { display: none; }[data-tw-domain="family"][data-tw-page="profile"] .btn-block {
      width: 100%;
      background: var(--tw-action-primary);
      color: var(--tw-action-primary-text);
      border: none;
      border-radius: 12px;
      padding: 12px 16px;
      font-size: 15px;
      font-weight: 600;
      cursor: pointer;
    }[data-tw-domain="family"][data-tw-page="profile"] .btn-block:hover { filter: brightness(1.04); }[data-tw-domain="family"][data-tw-page="profile"] .links { display: flex; flex-direction: column; gap: 8px; margin-top: 14px; }[data-tw-domain="family"][data-tw-page="profile"] .link-btn {
      display: block; text-align: center; text-decoration: none;
      background: var(--tw-atmosphere-fade);
      border: 1px solid var(--tw-border-soft);
      border-radius: 12px;
      padding: 12px;
      font-size: 14px; color: var(--tw-text-primary);
    }[data-tw-domain="family"][data-tw-page="profile"] .link-btn:hover { background: var(--tw-atmosphere-fade); }[data-tw-domain="family"][data-tw-page="profile"] .link-btn[href] {
      position: relative;
      z-index: 1;
      pointer-events: auto;
    }[data-tw-domain="family"][data-tw-page="profile"] .tw-events-prep--profile {
      border: 1px solid var(--tw-border-soft);
      border-radius: 16px;
      padding: 14px 16px;
      margin-bottom: 24px;
      background: var(--tw-atmosphere-fade);
    }[data-tw-domain="family"][data-tw-page="profile"] .tw-events-prep__title { font-size: 14px; font-weight: 600; color: var(--tw-action-primary); margin: 0 0 8px; }[data-tw-domain="family"][data-tw-page="profile"] .tw-events-prep--profile .tw-events-prep__title:only-of-type { margin-bottom: 0; }[data-tw-domain="family"][data-tw-page="profile"] .tw-events-prep__hint { font-size: 13px; color: var(--tw-text-muted); line-height: 1.5; margin: 0 0 12px; }[data-tw-domain="family"][data-tw-page="profile"] .tw-events-prep--profile .tw-events-prep__hint + .tw-events-prep__hint { margin-top: 8px; }[data-tw-domain="family"][data-tw-page="profile"] .tw-events-prep__placeholders { margin: 0; padding: 0; font-size: 12px; color: var(--tw-text-muted); }[data-tw-domain="family"][data-tw-page="profile"] .tw-events-prep__placeholders > div { display: flex; gap: 8px; justify-content: space-between; padding: 4px 0; border-top: 1px solid var(--tw-border-soft); }[data-tw-domain="family"][data-tw-page="profile"] .tw-events-prep__placeholders > div:first-child { border-top: none; }[data-tw-domain="family"][data-tw-page="profile"] .tw-events-prep__placeholders dt { font-weight: 500; color: var(--tw-text-secondary); }[data-tw-domain="family"][data-tw-page="profile"] .tw-events-prep__placeholders dd { margin: 0; font-family: ui-monospace, system-ui, sans-serif; color: var(--whisper); }


/* ── reply.html → data-tw-page="reply" ── */

[data-tw-domain="family"][data-tw-page="reply"] body {
      margin: 0;
      font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
      background: radial-gradient(circle at top, var(--bg-0), var(--tw-surface-primary));
      color: var(--tw-text-primary);
      min-height: 100vh;
      display: grid;
      place-items: center;
      padding: 24px;
    }[data-tw-domain="family"][data-tw-page="reply"] .card {
      width: min(100%, 640px);
      background: var(--tw-surface-secondary);
      border-radius: 24px;
      border: 1px solid var(--border);
      padding: 24px;
      box-shadow: 0 20px 60px var(--tw-atmosphere-fade);
    }[data-tw-domain="family"][data-tw-page="reply"] h1 { font-size: 22px; margin: 0 0 8px; }[data-tw-domain="family"][data-tw-page="reply"] .original-head { display: flex; flex-direction: column; gap: 2px; margin-bottom: 8px; }[data-tw-domain="family"][data-tw-page="reply"] .original-kicker { font-size: 12px; letter-spacing: 0.02em; color: var(--tw-text-muted); }[data-tw-domain="family"][data-tw-page="reply"] .original-author { font-size: 13px; color: var(--tw-text-primary); }[data-tw-domain="family"][data-tw-page="reply"] .original {
      padding: 14px 16px;
      border-radius: 16px;
      background: var(--surface-2);
      border: 1px solid var(--border);
      margin-bottom: 20px;
      font-size: 14px;
    }[data-tw-domain="family"][data-tw-page="reply"] .original-text { font-size: 15px; line-height: 1.55; }[data-tw-domain="family"][data-tw-page="reply"] .original-text.is-collapsed {
      display: -webkit-box;
      -webkit-box-orient: vertical;
      -webkit-line-clamp: 3;
      overflow: hidden;
    }[data-tw-domain="family"][data-tw-page="reply"] .original-toggle {
      margin: 8px 0 0;
      display: none;
      background: none;
      border: none;
      padding: 0;
      color: var(--tw-action-primary);
      font: inherit;
      font-size: 13px;
      font-weight: 600;
      cursor: pointer;
      text-align: left;
      width: auto !important;
    }[data-tw-domain="family"][data-tw-page="reply"] .original-toggle:hover { text-decoration: underline; }[data-tw-domain="family"][data-tw-page="reply"] .original button.original-toggle { margin-top: 8px; }[data-tw-domain="family"][data-tw-page="reply"] form { display: flex; flex-direction: column; gap: 12px; }[data-tw-domain="family"][data-tw-page="reply"] textarea {
      width: 100%;
      min-height: 140px;
      resize: vertical;
      border-radius: 14px;
      border: 1px solid var(--border);
      background: var(--tw-atmosphere-fade);
      color: var(--tw-text-primary);
      padding: 12px 14px;
      font-family: inherit;
      font-size: 14px;
      box-sizing: border-box;
    }[data-tw-domain="family"][data-tw-page="reply"] button {
      margin-top: 8px;
      background: var(--tw-action-primary);
      color: var(--tw-action-primary-text);
      border-radius: 14px;
      border: none;
      padding: 12px 16px;
      font-weight: 600;
      font-size: 14px;
      cursor: pointer;
      width: 100%;
    }[data-tw-domain="family"][data-tw-page="reply"] .message { margin-top: 12px; font-size: 14px; color: var(--tw-action-primary); }[data-tw-domain="family"][data-tw-page="reply"] .back-link {
      display: inline-block;
      margin-top: 16px;
      font-size: 13px;
      color: var(--tw-text-muted);
      text-decoration: none;
    }[data-tw-domain="family"][data-tw-page="reply"] .responses { margin-top: 28px; }[data-tw-domain="family"][data-tw-page="reply"] .responses-title { font-size: 15px; color: var(--tw-text-muted); margin-bottom: 14px; }[data-tw-domain="family"][data-tw-page="reply"] .response-card {
      background: var(--tw-surface-primary);
      border: 1px solid var(--border);
      border-radius: 18px;
      padding: 14px;
      margin-bottom: 12px;
    }[data-tw-domain="family"][data-tw-page="reply"] .response-header {
      display: flex;
      align-items: center;
      gap: 12px;
      margin-bottom: 10px;
    }[data-tw-domain="family"][data-tw-page="reply"] .response-avatar {
      width: 42px;
      height: 42px;
      border-radius: 999px;
      object-fit: cover;
      border: 1px solid var(--tw-atmosphere-fade);
      flex-shrink: 0;
    }[data-tw-domain="family"][data-tw-page="reply"] .response-avatar-fallback {
      width: 42px;
      height: 42px;
      border-radius: 999px;
      display: grid;
      place-items: center;
      background: var(--tw-atmosphere-fade);
      color: var(--tw-text-muted);
      font-size: 11px;
      flex-shrink: 0;
    }[data-tw-domain="family"][data-tw-page="reply"] .response-author { font-size: 14px; font-weight: 600; color: var(--tw-text-primary); }[data-tw-domain="family"][data-tw-page="reply"] .response-date { font-size: 12px; color: var(--tw-text-muted); margin-top: 2px; }[data-tw-domain="family"][data-tw-page="reply"] .response-text { font-size: 14px; line-height: 1.6; color: var(--tw-text-primary); white-space: pre-wrap; }[data-tw-domain="family"][data-tw-page="reply"] .empty-responses { font-size: 14px; color: var(--tw-text-muted); padding: 8px 0; }[data-tw-domain="family"][data-tw-page="reply"] .field-label { font-size: 15px; font-weight: 600; color: var(--tw-text-primary); margin: 0 0 6px; }[data-tw-domain="family"][data-tw-page="reply"] .field-hint { font-size: 12px; color: var(--tw-text-muted); line-height: 1.5; margin: 4px 0 0; white-space: pre-line; }[data-tw-domain="family"][data-tw-page="reply"] .why { margin: 0 0 16px; font-size: 15px; line-height: 1.6; color: var(--tw-text-primary); }[data-tw-domain="family"][data-tw-page="reply"] .empty-responses p { margin: 0; }[data-tw-domain="family"][data-tw-page="reply"] .empty-responses .empty-line2 { margin-top: 6px; }


/* ── reply_sent.html → data-tw-page="reply-sent" ── */

[data-tw-domain="family"][data-tw-page="reply-sent"] * { box-sizing: border-box; margin: 0; padding: 0; }[data-tw-domain="family"][data-tw-page="reply-sent"] body {
      font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
      background: radial-gradient(circle at top, var(--bg-0), var(--tw-surface-primary));
      color: var(--tw-text-primary);
      min-height: 100vh;
      display: grid;
      place-items: center;
      padding: 24px;
    }[data-tw-domain="family"][data-tw-page="reply-sent"] .card {
      width: min(100%, 480px);
      background: var(--tw-atmosphere-fade);
      border-radius: 24px;
      border: 1px solid var(--border);
      padding: 36px 28px;
      box-shadow: 0 20px 60px var(--tw-atmosphere-fade);
      text-align: center;
    }[data-tw-domain="family"][data-tw-page="reply-sent"] .icon {
      font-size: 52px;
      margin-bottom: 20px;
    }[data-tw-domain="family"][data-tw-page="reply-sent"] h1 {
      font-size: 22px;
      font-weight: 700;
      margin-bottom: 10px;
    }[data-tw-domain="family"][data-tw-page="reply-sent"] .subtitle {
      color: var(--tw-text-muted);
      font-size: 15px;
      line-height: 1.55;
      margin-bottom: 28px;
    }[data-tw-domain="family"][data-tw-page="reply-sent"] .author-line {
      color: var(--tw-action-primary);
      font-size: 14px;
      margin-bottom: 28px;
    }[data-tw-domain="family"][data-tw-page="reply-sent"] .btn {
      display: block;
      width: 100%;
      text-align: center;
      text-decoration: none;
      background: var(--tw-action-primary);
      color: var(--tw-action-primary-text);
      padding: 14px 18px;
      border-radius: 14px;
      font-weight: 600;
      font-size: 15px;
      margin-bottom: 12px;
    }[data-tw-domain="family"][data-tw-page="reply-sent"] .btn-secondary {
      display: block;
      text-align: center;
      text-decoration: none;
      color: var(--tw-text-muted);
      font-size: 13px;
      padding: 8px;
    }[data-tw-domain="family"][data-tw-page="reply-sent"] .btn-secondary:hover { color: var(--tw-text-primary); }


/* ── stewardship.html → data-tw-page="stewardship" ── */

[data-tw-domain="family"][data-tw-page="stewardship"] body { margin:0; min-height:100vh; font-family:system-ui,-apple-system,sans-serif; background:var(--tw-surface-primary); color:var(--tw-text-primary); padding:20px 16px 48px; line-height:1.55; box-sizing:border-box; }[data-tw-domain="family"][data-tw-page="stewardship"] body * { box-sizing:border-box; }[data-tw-domain="family"][data-tw-page="stewardship"] header { border-bottom:1px solid var(--tw-border-soft); padding-bottom:18px; margin-bottom:28px; }[data-tw-domain="family"][data-tw-page="stewardship"] h1 { margin:0 0 6px; font-size:1.4rem; font-weight:600; }[data-tw-domain="family"][data-tw-page="stewardship"] .lead { color:var(--tw-text-muted); font-size:14px; margin:0 0 12px; max-width:40rem; }[data-tw-domain="family"][data-tw-page="stewardship"] .role-note { font-size:13px; color:var(--tw-text-muted); margin:0 0 16px; }[data-tw-domain="family"][data-tw-page="stewardship"] .stew-sections { display:flex; flex-direction:column; gap:32px; max-width:720px; }[data-tw-domain="family"][data-tw-page="stewardship"] section.stew { padding:0 2px; }[data-tw-domain="family"][data-tw-page="stewardship"] section.stew h2 { margin:0 0 12px; font-size:0.78rem; letter-spacing:0.06em; text-transform:uppercase; color:var(--tw-action-primary); font-weight:600; }[data-tw-domain="family"][data-tw-page="stewardship"] .stew-note { font-size:13px; color:var(--tw-text-muted); margin:0 0 14px; }[data-tw-domain="family"][data-tw-page="stewardship"] .card { border:1px solid var(--tw-border-soft); border-radius:12px; padding:14px 16px; background:var(--tw-atmosphere-fade); margin-bottom:12px; }[data-tw-domain="family"][data-tw-page="stewardship"] .card h3 { margin:0 0 8px; font-size:15px; font-weight:500; }[data-tw-domain="family"][data-tw-page="stewardship"] .card-meta { font-size:12px; color:var(--tw-text-muted); margin:0 0 10px; }[data-tw-domain="family"][data-tw-page="stewardship"] label { display:block; font-size:13px; color:var(--tw-text-muted); margin:8px 0 4px; }[data-tw-domain="family"][data-tw-page="stewardship"] input, [data-tw-domain="family"][data-tw-page="stewardship"] select, [data-tw-domain="family"][data-tw-page="stewardship"] textarea { width:100%; max-width:100%; padding:8px 10px; border-radius:8px; border:1px solid var(--tw-border-soft); background:var(--tw-surface-primary); color:var(--tw-text-primary); font-size:14px; }[data-tw-domain="family"][data-tw-page="stewardship"] textarea { min-height:64px; resize:vertical; }[data-tw-domain="family"][data-tw-page="stewardship"] button, [data-tw-domain="family"][data-tw-page="stewardship"] .btn-quiet { display:inline-block; margin-top:8px; padding:10px 16px; border-radius:8px; border:none; background:var(--tw-action-primary); color:var(--tw-action-primary-text); font-weight:600; font-size:14px; cursor:pointer; min-height:44px; }[data-tw-domain="family"][data-tw-page="stewardship"] .btn-quiet.secondary { background:transparent; color:var(--tw-action-primary); border:1px solid var(--tw-border-soft); }[data-tw-domain="family"][data-tw-page="stewardship"] .relation-list, [data-tw-domain="family"][data-tw-page="stewardship"] .union-list { list-style:none; margin:0; padding:0; }[data-tw-domain="family"][data-tw-page="stewardship"] .relation-list li, [data-tw-domain="family"][data-tw-page="stewardship"] .union-list li { padding:10px 0; border-bottom:1px solid var(--tw-border-soft); font-size:14px; }[data-tw-domain="family"][data-tw-page="stewardship"] .relation-list li:last-child, [data-tw-domain="family"][data-tw-page="stewardship"] .union-list li:last-child { border-bottom:none; }[data-tw-domain="family"][data-tw-page="stewardship"] .hidden-badge { font-size:12px; color:var(--tw-text-muted); font-style:italic; }[data-tw-domain="family"][data-tw-page="stewardship"] form.inline-actions { margin-top:8px; }


/* ── timeline.html → data-tw-page="timeline" ── */

[data-tw-domain="family"][data-tw-page="timeline"] * { box-sizing: border-box; margin: 0; padding: 0; }[data-tw-domain="family"][data-tw-page="timeline"] body {
      font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
      background: radial-gradient(circle at top, var(--bg-0), var(--tw-surface-primary));
      color: var(--tw-text-primary); min-height: 100vh; padding: 32px 24px;
    }[data-tw-domain="family"][data-tw-page="timeline"] .container { max-width: 640px; margin: 0 auto; }[data-tw-domain="family"][data-tw-page="timeline"] .back-link { display: inline-block; margin-bottom: 28px; font-size: 13px; color: var(--tw-text-muted); text-decoration: none; }[data-tw-domain="family"][data-tw-page="timeline"] .back-link:hover { color: var(--tw-text-primary); }[data-tw-domain="family"][data-tw-page="timeline"] h1 { font-size: 24px; font-weight: 700; margin-bottom: 32px; }[data-tw-domain="family"][data-tw-page="timeline"] h1 span { color: var(--tw-action-primary); }[data-tw-domain="family"][data-tw-page="timeline"] .timeline { position: relative; padding-left: 32px; }[data-tw-domain="family"][data-tw-page="timeline"] .timeline::before {
      content: ""; position: absolute; left: 8px; top: 0; bottom: 0;
      width: 2px; background: var(--border);
    }[data-tw-domain="family"][data-tw-page="timeline"] .tl-item { position: relative; margin-bottom: 28px; }[data-tw-domain="family"][data-tw-page="timeline"] .tl-dot {
      position: absolute; left: -28px; top: 4px;
      width: 12px; height: 12px; border-radius: 999px;
      border: 2px solid var(--tw-surface-primary);
    }[data-tw-domain="family"][data-tw-page="timeline"] .dot-birth { background: var(--birth); }[data-tw-domain="family"][data-tw-page="timeline"] .dot-death { background: var(--death); }[data-tw-domain="family"][data-tw-page="timeline"] .dot-memory { background: var(--memory); }[data-tw-domain="family"][data-tw-page="timeline"] .dot-wedding { background: var(--wedding); }[data-tw-domain="family"][data-tw-page="timeline"] .dot-event { background: var(--event); }[data-tw-domain="family"][data-tw-page="timeline"] .dot-memory_recording { background: var(--memory); }[data-tw-domain="family"][data-tw-page="timeline"] .tl-card {
      background: var(--tw-surface-primary);
      border: 1px solid var(--border);
      border-radius: 16px;
      padding: 14px 16px;
    }[data-tw-domain="family"][data-tw-page="timeline"] .tl-header { display: flex; align-items: center; gap: 10px; margin-bottom: 6px; }[data-tw-domain="family"][data-tw-page="timeline"] .tl-avatar { width: 32px; height: 32px; border-radius: 999px; object-fit: cover; flex-shrink: 0; }[data-tw-domain="family"][data-tw-page="timeline"] .tl-avatar-fallback { width: 32px; height: 32px; border-radius: 999px; background: var(--tw-surface-tertiary); flex-shrink: 0; }[data-tw-domain="family"][data-tw-page="timeline"] .tl-title { font-size: 15px; font-weight: 600; }[data-tw-domain="family"][data-tw-page="timeline"] .tl-date { font-size: 12px; color: var(--tw-text-muted); margin-bottom: 6px; }[data-tw-domain="family"][data-tw-page="timeline"] .tl-text { font-size: 13px; color: var(--tw-text-muted); line-height: 1.55; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }[data-tw-domain="family"][data-tw-page="timeline"] .tl-link { font-size: 12px; color: var(--tw-action-primary); text-decoration: none; display: inline-block; margin-top: 6px; }[data-tw-domain="family"][data-tw-page="timeline"] .tl-link:hover { text-decoration: underline; }[data-tw-domain="family"][data-tw-page="timeline"] .year-marker { font-size: 12px; font-weight: 700; color: var(--tw-action-primary); letter-spacing: .08em; margin-bottom: 16px; margin-top: 8px; position: relative; left: -32px; padding-left: 8px; }[data-tw-domain="family"][data-tw-page="timeline"] .empty-state { color: var(--tw-text-muted); padding: 20px 0; font-size: 14px; }[data-tw-domain="family"][data-tw-page="timeline"] .tw-events-prep {
      border: 1px solid var(--border);
      border-radius: 12px;
      padding: 12px 14px;
      margin-bottom: 20px;
      background: var(--tw-surface-tertiary);
    }[data-tw-domain="family"][data-tw-page="timeline"] .tw-events-prep__label { font-size: 13px; font-weight: 600; color: var(--tw-action-primary); margin: 0 0 6px; }[data-tw-domain="family"][data-tw-page="timeline"] .tw-events-prep__hint { font-size: 12px; color: var(--tw-text-muted); line-height: 1.45; margin: 0; }[data-tw-domain="family"][data-tw-page="timeline"] .tw-event-view-list { margin-bottom: 24px; display: flex; flex-direction: column; gap: 12px; }[data-tw-domain="family"][data-tw-page="timeline"] .tw-event-view {
      background: var(--tw-surface-primary);
      border: 1px solid var(--border);
      border-radius: 14px;
      padding: 12px 14px;
      font-size: 13px;
      line-height: 1.5;
    }[data-tw-domain="family"][data-tw-page="timeline"] .tw-event-view__date { font-size: 12px; color: var(--tw-text-muted); margin-bottom: 6px; }[data-tw-domain="family"][data-tw-page="timeline"] .tw-event-view__author {
      font-size: 12px; color: var(--tw-text-muted);
      margin: 0 0 8px;
      line-height: 1.45;
    }[data-tw-domain="family"][data-tw-page="timeline"] .tw-event-view__author .tw-event-view__author-label { color: var(--tw-text-primary); font-weight: 600; }[data-tw-domain="family"][data-tw-page="timeline"] .tw-event-view__author a { color: var(--tw-action-primary); text-decoration: none; }[data-tw-domain="family"][data-tw-page="timeline"] .tw-event-view__author a:hover { text-decoration: underline; }[data-tw-domain="family"][data-tw-page="timeline"] .tw-event-view__title { font-size: 15px; font-weight: 600; margin-bottom: 8px; color: var(--tw-text-primary); }[data-tw-domain="family"][data-tw-page="timeline"] .tw-event-view__meaning { margin: 0 0 6px; color: var(--tw-text-muted); }[data-tw-domain="family"][data-tw-page="timeline"] .tw-event-view__meaning-label { font-size: 12px; color: var(--tw-text-muted); margin: 0 0 4px; }[data-tw-domain="family"][data-tw-page="timeline"] .tw-event-view__meaning-text { font-size: 13px; line-height: 1.5; }[data-tw-domain="family"][data-tw-page="timeline"] .tw-event-view__meta {
      font-size: 12px;
      color: var(--tw-text-muted);
      display: flex;
      flex-wrap: wrap;
      gap: 8px 12px;
      margin-top: 8px;
    }[data-tw-domain="family"][data-tw-page="timeline"] .tw-event-view__meta-item b { color: var(--tw-text-primary); font-weight: 600; }


/* ── welcome.html → data-tw-page="welcome" (composition only — TW-PRODUCT-RECOVERY-001A) ── */

[data-tw-domain="family"][data-tw-page="welcome"] body {
  margin: 0;
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(20px, 4vw, 48px);
  font-family: var(--tw-font-ui, system-ui, sans-serif);
  color: var(--tw-text-primary);
  background:
    radial-gradient(1200px 500px at 10% -10%, var(--tw-atmosphere-warm), transparent 62%),
    radial-gradient(1000px 500px at 90% -18%, var(--tw-atmosphere-depth), transparent 56%),
    linear-gradient(152deg, var(--bg-0) 0%, var(--bg-1) 100%);
}

[data-tw-domain="family"][data-tw-page="welcome"] .welcome {
  width: 100%;
  max-width: 960px;
  border: 1px solid var(--tw-border-soft);
  border-radius: 24px;
  padding: 28px;
  background: var(--tw-atmosphere-fade);
  backdrop-filter: blur(6px);
  box-shadow: 0 18px 54px var(--tw-atmosphere-fade);
}

[data-tw-domain="family"][data-tw-page="welcome"] .label {
  display: inline-block;
  padding: 6px 12px;
  border-radius: 999px;
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  border: 1px solid var(--tw-atmosphere-warm);
  color: var(--tw-action-primary);
  margin-bottom: 14px;
}

[data-tw-domain="family"][data-tw-page="welcome"] h1 {
  margin: 0 0 10px;
  font-size: clamp(30px, 4vw, 48px);
  line-height: 1.05;
  font-weight: 700;
}

[data-tw-domain="family"][data-tw-page="welcome"] .subtitle {
  margin: 0 0 22px;
  color: var(--tw-text-muted);
  font-size: 16px;
  line-height: 1.5;
  max-width: 720px;
}

[data-tw-domain="family"][data-tw-page="welcome"] .memory {
  border: 1px solid var(--tw-border-soft);
  border-radius: 18px;
  background: var(--tw-surface-secondary, var(--tw-surface-tertiary));
  padding: 22px;
  margin-bottom: 18px;
}

[data-tw-domain="family"][data-tw-page="welcome"] .memory-text {
  margin: 0;
  font-size: clamp(19px, 2.7vw, 29px);
  line-height: 1.42;
  font-weight: 500;
  white-space: pre-wrap;
}

[data-tw-domain="family"][data-tw-page="welcome"] .meta {
  margin-top: 16px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 10px;
  font-size: 14px;
  color: var(--tw-text-muted);
}

[data-tw-domain="family"][data-tw-page="welcome"] .meta .avatar {
  width: 36px;
  height: 36px;
  border-radius: 999px;
  object-fit: cover;
}

[data-tw-domain="family"][data-tw-page="welcome"] .meta-sep {
  opacity: 0.65;
}

[data-tw-domain="family"][data-tw-page="welcome"] .listen-wrap {
  margin-top: 18px;
  padding-top: 14px;
  border-top: 1px solid var(--tw-border-soft);
}

[data-tw-domain="family"][data-tw-page="welcome"] .listen-label {
  margin: 0 0 8px;
  font-size: 14px;
  font-weight: 600;
  color: var(--tw-action-primary);
}

[data-tw-domain="family"][data-tw-page="welcome"] .listen-wrap audio {
  width: 100%;
  border-radius: 10px;
}

[data-tw-domain="family"][data-tw-page="welcome"] .actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

[data-tw-domain="family"][data-tw-page="welcome"] .btn {
  display: inline-block;
  text-decoration: none;
  border-radius: 12px;
  padding: 12px 18px;
  font-weight: 600;
  font-size: 14px;
}

[data-tw-domain="family"][data-tw-page="welcome"] [data-tw-object="primary-action"] {
  background: var(--tw-action-primary);
  color: var(--tw-text-on-action);
}

[data-tw-domain="family"][data-tw-page="welcome"] [data-tw-object="secondary-action"] {
  border: 1px solid var(--tw-border-soft);
  color: var(--tw-text-primary);
  background: var(--tw-surface-tertiary);
}

@media (max-width: 700px) {
  [data-tw-domain="family"][data-tw-page="welcome"] body {
    padding: 16px;
  }

  [data-tw-domain="family"][data-tw-page="welcome"] .welcome {
    padding: 20px;
    border-radius: 18px;
  }

  [data-tw-domain="family"][data-tw-page="welcome"] .memory {
    padding: 16px;
  }
}

[data-tw-domain="family"][data-tw-page="welcome"] .welcome-prelude {
  margin-bottom: clamp(8px, 2vw, 16px);
}

@media (max-width: 700px) {
  [data-tw-domain="family"][data-tw-page="welcome"] body {
    padding: 16px;
  }
}


/* ── cosmos_home.html → data-tw-page="cosmos-home" (composition only — TW-PRODUCT-RECOVERY-001B) ── */

[data-tw-domain="family"][data-tw-page="cosmos-home"] body {
  margin: 0;
  min-height: 100vh;
  padding: clamp(24px, 4vw, 56px) clamp(20px, 3vw, 40px) clamp(48px, 6vw, 72px);
  font-family: var(--tw-font-ui, system-ui, sans-serif);
  color: var(--tw-text-primary);
  background:
    radial-gradient(1400px 620px at 8% -8%, var(--tw-atmosphere-warm), transparent 65%),
    radial-gradient(1100px 540px at 92% 0%, var(--tw-atmosphere-depth), transparent 58%),
    linear-gradient(168deg, var(--bg-0) 0%, var(--bg-1) 100%);
}

@media (max-width: 700px) {
  [data-tw-domain="family"][data-tw-page="cosmos-home"] body {
    padding: 18px 16px 40px;
  }
}


/* ── who_am_i.html → data-tw-page="who-am-i" ── */

[data-tw-domain="family"][data-tw-page="who-am-i"] body {
      margin: 0;
      font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
      background: radial-gradient(circle at top, var(--bg-0), var(--tw-surface-primary));
      color: var(--tw-text-primary);
      min-height: 100vh;
      display: grid;
      place-items: center;
      padding: 24px;
    }[data-tw-domain="family"][data-tw-page="who-am-i"] .card {
      width: min(100%, 520px);
      background: var(--tw-atmosphere-fade);
      border-radius: 24px;
      border: 1px solid var(--border);
      padding: 24px;
      box-shadow: 0 20px 60px var(--tw-atmosphere-fade);
    }[data-tw-domain="family"][data-tw-page="who-am-i"] h1 {
      font-size: 22px;
      margin: 0 0 12px;
    }[data-tw-domain="family"][data-tw-page="who-am-i"] p {
      margin: 0 0 16px;
      color: var(--tw-text-muted);
      font-size: 14px;
    }[data-tw-domain="family"][data-tw-page="who-am-i"] form {
      display: flex;
      flex-direction: column;
      gap: 12px;
    }[data-tw-domain="family"][data-tw-page="who-am-i"] select {
      border-radius: 12px;
      padding: 8px 10px;
      border: 1px solid var(--border);
      background: var(--tw-atmosphere-fade);
      color: var(--tw-text-primary);
      font-size: 14px;
    }[data-tw-domain="family"][data-tw-page="who-am-i"] button {
      margin-top: 8px;
      background: var(--tw-action-primary);
      color: var(--tw-action-primary-text);
      border-radius: 14px;
      border: none;
      padding: 10px 16px;
      font-weight: 600;
      font-size: 14px;
      cursor: pointer;
      width: 100%;
    }[data-tw-domain="family"][data-tw-page="who-am-i"] .back-link {
      display: inline-block;
      margin-top: 16px;
      font-size: 13px;
      color: var(--tw-text-muted);
      text-decoration: none;
    }


/* ── cosmos_person_v2 own stories — 1:1 profile /family/person (TW-FAMILY-URL-CANON-001) ── */

[data-tw-domain="family"][data-tw-page="cosmos-person-v2"] .person-own-stories.section {
  border: 1px solid var(--tw-border-soft);
  border-radius: 20px;
  background: var(--tw-surface-primary);
  padding: 20px 20px 18px;
  margin-bottom: 16px;
}

[data-tw-domain="family"][data-tw-page="cosmos-person-v2"] .person-own-stories h2 {
  margin: 0 0 4px;
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--tw-text-memory);
  text-transform: none;
  letter-spacing: normal;
}

[data-tw-domain="family"][data-tw-page="cosmos-person-v2"] .person-own-stories p.lead {
  margin: 0 0 14px;
  font-size: 13px;
  color: var(--tw-text-muted);
  line-height: 1.45;
}

[data-tw-domain="family"][data-tw-page="cosmos-person-v2"] .person-own-stories .time-group {
  margin-top: 16px;
}

[data-tw-domain="family"][data-tw-page="cosmos-person-v2"] .person-own-stories .time-group:first-child {
  margin-top: 0;
}

[data-tw-domain="family"][data-tw-page="cosmos-person-v2"] .person-own-stories .time-year {
  font-size: 12px;
  font-weight: 700;
  color: var(--whisper);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  margin: 0 0 10px 2px;
}

[data-tw-domain="family"][data-tw-page="cosmos-person-v2"] .person-own-stories .card-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

[data-tw-domain="family"][data-tw-page="cosmos-person-v2"] .person-own-stories .timeline {
  position: relative;
  margin-top: 4px;
  padding-left: 44px;
}

[data-tw-domain="family"][data-tw-page="cosmos-person-v2"] .person-own-stories .timeline::before {
  content: "";
  position: absolute;
  left: 24px;
  top: 0;
  bottom: 0;
  width: 2px;
  background: var(--tw-atmosphere-fade);
  border-radius: 1px;
}

[data-tw-domain="family"][data-tw-page="cosmos-person-v2"] .person-own-stories .timeline .card-list {
  gap: 12px;
}

[data-tw-domain="family"][data-tw-page="cosmos-person-v2"] .person-own-stories .own-card {
  border: 1px solid var(--tw-atmosphere-fade);
  border-radius: 16px;
  padding: 14px 16px 12px;
  background: var(--tw-atmosphere-fade);
}

[data-tw-domain="family"][data-tw-page="cosmos-person-v2"] .person-own-stories .own-card.timeline-item {
  position: relative;
  z-index: 1;
}

[data-tw-domain="family"][data-tw-page="cosmos-person-v2"] .person-own-stories .own-card.timeline-item::after {
  content: "";
  position: absolute;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  left: -23.5px;
  top: 2.55rem;
  transform: translateY(-50%);
  background: var(--tw-action-primary);
  box-shadow: 0 0 0 2px var(--tw-atmosphere-fade);
}

[data-tw-domain="family"][data-tw-page="cosmos-person-v2"] .person-own-stories .own-card-top {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0 6px;
  margin-bottom: 6px;
  width: 100%;
}

[data-tw-domain="family"][data-tw-page="cosmos-person-v2"] .person-own-stories .own-kind {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--tw-action-primary);
  background: var(--tw-atmosphere-fade);
  border-radius: 6px;
  padding: 3px 7px;
}

[data-tw-domain="family"][data-tw-page="cosmos-person-v2"] .person-own-stories .own-meta-sep {
  font-size: 12px;
  color: var(--whisper);
  user-select: none;
}

[data-tw-domain="family"][data-tw-page="cosmos-person-v2"] .person-own-stories .own-date-integrated {
  font-size: 12px;
  color: var(--tw-text-muted);
  font-variant-numeric: tabular-nums;
}

[data-tw-domain="family"][data-tw-page="cosmos-person-v2"] .person-own-stories .own-title {
  font-size: 16px;
  font-weight: 700;
  color: var(--tw-text-primary);
  margin: 0;
  line-height: 1.35;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

[data-tw-domain="family"][data-tw-page="cosmos-person-v2"] .person-own-stories .own-preview {
  font-size: 14px;
  line-height: 1.45;
  color: var(--tw-text-muted);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  margin: 8px 0 0;
}

[data-tw-domain="family"][data-tw-page="cosmos-person-v2"] .person-own-stories .own-actions {
  margin-top: 12px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
}

[data-tw-domain="family"][data-tw-page="cosmos-person-v2"] .person-own-stories .own-actions-sep {
  color: var(--whisper);
  user-select: none;
  padding: 0 6px;
  font-weight: 500;
}

[data-tw-domain="family"][data-tw-page="cosmos-person-v2"] .person-own-stories a.own-link--primary {
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
  color: var(--tw-action-primary);
}

[data-tw-domain="family"][data-tw-page="cosmos-person-v2"] .person-own-stories a.own-link--primary:hover {
  text-decoration: underline;
}

[data-tw-domain="family"][data-tw-page="cosmos-person-v2"] .person-own-stories a.own-link--secondary {
  font-size: 14px;
  font-weight: 500;
  text-decoration: none;
  color: var(--tw-text-muted);
}

[data-tw-domain="family"][data-tw-page="cosmos-person-v2"] .person-own-stories a.own-link--secondary:hover {
  text-decoration: underline;
  color: var(--tw-text-secondary);
}

[data-tw-domain="family"][data-tw-page="cosmos-person-v2"] .person-own-stories .own-audio-hint {
  font-size: 12px;
  color: var(--whisper);
}

[data-tw-domain="family"][data-tw-page="cosmos-person-v2"] .person-own-stories .empty {
  color: var(--tw-text-muted);
  font-size: 14px;
  line-height: 1.5;
  padding: 4px 0;
}

/* ── cosmos_person.html → data-tw-page="cosmos-person" (TW-PERSON-CARD-REDESIGN-001) ── */

[data-tw-domain="family"][data-tw-page="cosmos-person"] .tw-person-factline,
[data-tw-domain="family"][data-tw-page="cosmos-person-v2"] .tw-person-factline,
[data-tw-domain="family"][data-tw-page="timeline"] .tw-person-factline {
  font-size: 12px;
  color: var(--tw-text-muted);
  margin-top: 5px;
  line-height: 1.5;
}

[data-tw-domain="family"][data-tw-page="cosmos-person"] .tw-person-timeline,
[data-tw-domain="family"][data-tw-page="timeline"] .tw-person-timeline {
  position: relative;
  padding-left: 28px;
}

[data-tw-domain="family"][data-tw-page="cosmos-person"] .tw-person-timeline::before,
[data-tw-domain="family"][data-tw-page="timeline"] .tw-person-timeline::before {
  content: "";
  position: absolute;
  left: 7px;
  top: 8px;
  bottom: 8px;
  width: 1px;
  background: var(--tw-border-soft);
}

[data-tw-domain="family"][data-tw-page="cosmos-person"] .tw-tl-item,
[data-tw-domain="family"][data-tw-page="timeline"] .tw-tl-item {
  position: relative;
  margin-bottom: 10px;
}

[data-tw-domain="family"][data-tw-page="cosmos-person"] .tw-tl-item::before,
[data-tw-domain="family"][data-tw-page="timeline"] .tw-tl-item::before {
  content: "";
  position: absolute;
  left: -25px;
  top: 14px;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--tw-memory-accent);
  box-shadow: 0 0 6px color-mix(in srgb, var(--tw-memory-accent) 35%, transparent);
}

[data-tw-domain="family"][data-tw-page="cosmos-person"] .tw-tl-card,
[data-tw-domain="family"][data-tw-page="timeline"] .tw-tl-card {
  background: var(--tw-surface-secondary);
  border: 1px solid var(--tw-border-soft);
  border-radius: 12px;
  padding: 14px 16px;
  transition: border-color 0.15s;
}

[data-tw-domain="family"][data-tw-page="cosmos-person"] .tw-tl-card:hover,
[data-tw-domain="family"][data-tw-page="timeline"] .tw-tl-card:hover {
  border-color: var(--tw-border-memory);
}

[data-tw-domain="family"][data-tw-page="cosmos-person"] .tw-tl-text,
[data-tw-domain="family"][data-tw-page="timeline"] .tw-tl-text {
  font-size: 14px;
  color: var(--tw-text-primary);
  line-height: 1.65;
  margin-bottom: 10px;
}

[data-tw-domain="family"][data-tw-page="cosmos-person"] .tw-tl-meta,
[data-tw-domain="family"][data-tw-page="timeline"] .tw-tl-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

[data-tw-domain="family"][data-tw-page="cosmos-person"] .tw-tl-date,
[data-tw-domain="family"][data-tw-page="timeline"] .tw-tl-date {
  font-size: 11px;
  color: var(--tw-text-muted);
}

[data-tw-domain="family"][data-tw-page="cosmos-person"] .tw-audio-pill,
[data-tw-domain="family"][data-tw-page="cosmos-person-v2"] .tw-audio-pill,
[data-tw-domain="family"][data-tw-page="timeline"] .tw-audio-pill {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 11px;
  color: var(--tw-memory-accent-soft);
  background: var(--tw-memory-surface-dim);
  border: 1px solid var(--tw-border-memory);
  padding: 3px 10px;
  border-radius: 20px;
  cursor: pointer;
  transition: background 0.15s;
}

[data-tw-domain="family"][data-tw-page="cosmos-person"] .tw-all-link,
[data-tw-domain="family"][data-tw-page="cosmos-person-v2"] .tw-all-link,
[data-tw-domain="family"][data-tw-page="timeline"] .tw-all-link {
  display: block;
  text-align: center;
  font-size: 12px;
  color: var(--tw-text-muted);
  padding: 10px;
  border: 1px solid var(--tw-border-soft);
  border-radius: 10px;
  text-decoration: none;
  margin-top: 4px;
  transition: color 0.15s, border-color 0.15s;
}

[data-tw-domain="family"][data-tw-page="cosmos-person"] .tw-all-link:hover,
[data-tw-domain="family"][data-tw-page="cosmos-person-v2"] .tw-all-link:hover,
[data-tw-domain="family"][data-tw-page="timeline"] .tw-all-link:hover {
  color: var(--tw-memory-accent-soft);
  border-color: var(--tw-border-memory);
}

[data-tw-domain="family"][data-tw-page="cosmos-person"] .tw-family-group,
[data-tw-domain="family"][data-tw-page="cosmos-person-v2"] .tw-family-group,
[data-tw-domain="family"][data-tw-page="timeline"] .tw-family-group {
  margin-bottom: 16px;
}

[data-tw-domain="family"][data-tw-page="cosmos-person"] .tw-family-label,
[data-tw-domain="family"][data-tw-page="cosmos-person-v2"] .tw-family-label,
[data-tw-domain="family"][data-tw-page="timeline"] .tw-family-label {
  font-size: 11px;
  color: var(--tw-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-bottom: 5px;
}

[data-tw-domain="family"][data-tw-page="cosmos-person"] .tw-family-name,
[data-tw-domain="family"][data-tw-page="cosmos-person-v2"] .tw-family-name,
[data-tw-domain="family"][data-tw-page="timeline"] .tw-family-name {
  display: block;
  font-size: 15px;
  color: var(--tw-memory-accent);
  text-decoration: none;
  padding: 2px 0;
  transition: color 0.15s;
}

[data-tw-domain="family"][data-tw-page="cosmos-person"] .tw-family-name:hover,
[data-tw-domain="family"][data-tw-page="cosmos-person-v2"] .tw-family-name:hover,
[data-tw-domain="family"][data-tw-page="timeline"] .tw-family-name:hover {
  color: var(--tw-memory-accent-soft);
}

[data-tw-domain="family"][data-tw-page="cosmos-person"] .person-memory-cards,
[data-tw-domain="family"][data-tw-page="cosmos-person-v2"] .person-memory-cards,
[data-tw-domain="family"][data-tw-page="timeline"] .person-memory-cards {
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin-bottom: 12px;
}

[data-tw-domain="family"][data-tw-page="cosmos-person"] [data-tw-object="memory-card"][data-tw-variant="list"],
[data-tw-domain="family"][data-tw-page="cosmos-person-v2"] [data-tw-object="memory-card"][data-tw-variant="list"],
[data-tw-domain="family"][data-tw-page="timeline"] [data-tw-object="memory-card"][data-tw-variant="list"] {
  margin: 0;
}

[data-tw-domain="family"][data-tw-page="cosmos-person"] [data-tw-object="memory-card"][data-tw-variant="list"] .memory-listen-label,
[data-tw-domain="family"][data-tw-page="cosmos-person-v2"] [data-tw-object="memory-card"][data-tw-variant="list"] .memory-listen-label,
[data-tw-domain="family"][data-tw-page="timeline"] [data-tw-object="memory-card"][data-tw-variant="list"] .memory-listen-label {
  margin: 10px 0 6px;
  font-size: 13px;
  color: var(--tw-text-muted);
}

[data-tw-domain="family"][data-tw-page="cosmos-person"] [data-tw-object="memory-card"][data-tw-variant="list"] .memory-date,
[data-tw-domain="family"][data-tw-page="cosmos-person-v2"] [data-tw-object="memory-card"][data-tw-variant="list"] .memory-date,
[data-tw-domain="family"][data-tw-page="timeline"] [data-tw-object="memory-card"][data-tw-variant="list"] .memory-date {
  margin-top: 10px;
  font-size: 12px;
  color: var(--tw-text-muted);
}

[data-tw-domain="family"][data-tw-page="cosmos-person"] [data-tw-object="memory-card"][data-tw-variant="list"] audio,
[data-tw-domain="family"][data-tw-page="cosmos-person-v2"] [data-tw-object="memory-card"][data-tw-variant="list"] audio,
[data-tw-domain="family"][data-tw-page="timeline"] [data-tw-object="memory-card"][data-tw-variant="list"] audio {
  width: 100%;
  border-radius: 8px;
}

[data-tw-domain="family"][data-tw-page="cosmos-person"] .memories-all-link,
[data-tw-domain="family"][data-tw-page="cosmos-person-v2"] .memories-all-link,
[data-tw-domain="family"][data-tw-page="timeline"] .memories-all-link {
  margin-top: 4px;
  font-size: 13px;
}

[data-tw-domain="family"][data-tw-page="cosmos-person"] .memories-all-link a,
[data-tw-domain="family"][data-tw-page="cosmos-person-v2"] .memories-all-link a,
[data-tw-domain="family"][data-tw-page="timeline"] .memories-all-link a {
  color: var(--tw-action-primary);
  text-decoration: none;
}

[data-tw-domain="family"][data-tw-page="cosmos-person"] .bio-preview,
[data-tw-domain="family"][data-tw-page="cosmos-person-v2"] .bio-preview,
[data-tw-domain="family"][data-tw-page="timeline"] .bio-preview {
  white-space: pre-line;
  font-size: 15px;
  line-height: 1.55;
  margin: 0;
  color: var(--tw-text-secondary);
}

[data-tw-domain="family"][data-tw-page="cosmos-person-edit"] .person-quote {
  margin: 0 0 12px;
}

/* TW-PERSON-EDIT-RESTORE-003: cosmos_person_edit uses ops_detail_layers.css */

/* ── TW-FAMILY-RUNTIME-RESTORE-001: timeline season markers + reply audio ── */

[data-tw-domain="family"][data-tw-page="timeline"] .chronology-marker {
  font-size: 12px;
  font-weight: 700;
  color: var(--tw-memory-accent);
  letter-spacing: 0.08em;
  margin-bottom: 16px;
  margin-top: 8px;
  position: relative;
  left: -32px;
  padding-left: 8px;
  text-transform: uppercase;
}

/* TW-NAV-PERSON-CARD-001: timeline shell aligned with theme tokens */
[data-tw-domain="family"][data-tw-page="timeline"] body {
  background: var(--tw-surface-primary);
  color: var(--tw-text-primary);
  min-height: 100vh;
  padding: 0 0 48px;
}

[data-tw-domain="family"][data-tw-page="timeline"] .container {
  max-width: 680px;
  margin: 0 auto;
  padding: 28px 20px 0;
}

[data-tw-domain="family"][data-tw-page="timeline"] h1.page-title {
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--tw-text-muted);
  margin-bottom: 24px;
}

[data-tw-domain="family"][data-tw-page="timeline"] .timeline::before {
  background: var(--tw-border-soft);
}

[data-tw-domain="family"][data-tw-page="timeline"] .tl-card {
  background: var(--tw-surface-secondary);
  border-color: var(--tw-border-soft);
}

[data-tw-domain="family"][data-tw-page="timeline"] .tl-link {
  color: var(--tw-memory-accent);
}

[data-tw-domain="family"][data-tw-page="timeline"] .dot-birth,
[data-tw-domain="family"][data-tw-page="timeline"] .dot-death,
[data-tw-domain="family"][data-tw-page="timeline"] .dot-memory,
[data-tw-domain="family"][data-tw-page="timeline"] .dot-wedding,
[data-tw-domain="family"][data-tw-page="timeline"] .dot-event,
[data-tw-domain="family"][data-tw-page="timeline"] .dot-memory_recording {
  background: var(--tw-memory-accent);
}

[data-tw-domain="family"][data-tw-page="timeline"] .tl-card--memory {
  cursor: pointer;
  transition: border-color 0.18s ease, box-shadow 0.18s ease;
}

[data-tw-domain="family"][data-tw-page="timeline"] .tl-card--memory:hover,
[data-tw-domain="family"][data-tw-page="timeline"] .tl-card--memory.tl-card--active {
  border-color: color-mix(in srgb, var(--tw-memory-accent) 40%, var(--tw-border-soft));
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--tw-memory-accent) 18%, transparent);
}

[data-tw-domain="family"][data-tw-page="timeline"] .tl-hint {
  display: block;
  margin-top: 8px;
  font-size: 11px;
  color: var(--tw-text-muted);
  opacity: 0.85;
}

[data-tw-domain="family"][data-tw-page="timeline"] .tl-link--inline {
  margin-top: 8px;
}

body.tl-preview-open {
  overflow: hidden;
}

[data-tw-domain="family"][data-tw-page="timeline"] .tl-preview-overlay {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px 16px;
  background: color-mix(in srgb, var(--tw-atmosphere-fade) 62%, transparent);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}

[data-tw-domain="family"][data-tw-page="timeline"] .tl-preview-overlay[hidden] {
  display: none;
}

[data-tw-domain="family"][data-tw-page="timeline"] .tl-preview-panel {
  position: relative;
  width: min(560px, 100%);
  max-height: min(78vh, 640px);
  overflow: auto;
  padding: 20px 22px 18px;
  border-radius: 14px;
  border: 1px solid var(--tw-border-soft);
  background: var(--tw-surface-secondary);
  box-shadow: 0 18px 48px color-mix(in srgb, var(--tw-text-primary) 35%, transparent);
}

[data-tw-domain="family"][data-tw-page="timeline"] .tl-preview-close {
  position: absolute;
  top: 12px;
  right: 12px;
  border: none;
  background: transparent;
  color: var(--tw-text-muted);
  font-size: 13px;
  cursor: pointer;
  padding: 6px 8px;
  border-radius: 8px;
}

[data-tw-domain="family"][data-tw-page="timeline"] .tl-preview-close:hover {
  color: var(--tw-text-primary);
  background: color-mix(in srgb, var(--tw-text-muted) 12%, transparent);
}

[data-tw-domain="family"][data-tw-page="timeline"] .tl-preview-date {
  font-size: 12px;
  color: var(--tw-text-muted);
  margin-bottom: 8px;
  padding-right: 72px;
}

[data-tw-domain="family"][data-tw-page="timeline"] .tl-preview-title {
  font-size: 17px;
  font-weight: 600;
  line-height: 1.35;
  margin: 0 0 12px;
  padding-right: 48px;
  color: var(--tw-text-primary);
}

[data-tw-domain="family"][data-tw-page="timeline"] .tl-preview-body {
  font-size: 14px;
  line-height: 1.65;
  color: var(--tw-text-secondary, var(--tw-text-muted));
  white-space: pre-wrap;
  margin-bottom: 16px;
}

[data-tw-domain="family"][data-tw-page="timeline"] .tl-preview-open {
  display: inline-block;
  font-size: 13px;
  font-weight: 500;
  color: var(--tw-memory-accent);
  text-decoration: none;
}

[data-tw-domain="family"][data-tw-page="timeline"] .tl-preview-open:hover {
  text-decoration: underline;
}

/* TW-TIMELINE-TEMPORAL-NAVIGATION-001: floating temporal year navigator */

[data-tw-domain="family"][data-tw-page="timeline"] .tw-timeline-page-shell {
  max-width: 960px;
}

[data-tw-domain="family"][data-tw-page="timeline"] .timeline-body {
  display: grid;
  grid-template-columns: minmax(72px, 92px) minmax(0, 1fr);
  gap: 28px 36px;
  align-items: start;
}

[data-tw-domain="family"][data-tw-page="timeline"] .timeline-main {
  min-width: 0;
}

[data-tw-domain="family"][data-tw-page="timeline"] .tl-year-sentinel {
  display: block;
  height: 0;
  width: 0;
  overflow: hidden;
  scroll-margin-top: 120px;
}

[data-tw-domain="family"][data-tw-page="timeline"] .tl-temporal-nav {
  position: sticky;
  top: 120px;
  align-self: start;
  z-index: 2;
  opacity: 0.82;
  transition: opacity 0.24s ease;
}

[data-tw-domain="family"][data-tw-page="timeline"] .tl-temporal-nav:hover,
[data-tw-domain="family"][data-tw-page="timeline"] .tl-temporal-nav:focus-within {
  opacity: 1;
}

[data-tw-domain="family"][data-tw-page="timeline"] .tl-temporal-nav-list,
[data-tw-domain="family"][data-tw-page="timeline"] .tl-temporal-mobile-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

[data-tw-domain="family"][data-tw-page="timeline"] .tl-temporal-entry {
  appearance: none;
  border: none;
  background: transparent;
  cursor: pointer;
  padding: 2px 0;
  font: inherit;
  text-align: left;
  color: color-mix(in srgb, var(--tw-text-muted) 88%, var(--tw-border-soft) 12%);
  letter-spacing: 0.04em;
  line-height: 1.2;
  transition:
    color 0.22s ease,
    opacity 0.22s ease,
    transform 0.22s ease,
    text-shadow 0.22s ease;
}

[data-tw-domain="family"][data-tw-page="timeline"] .tl-temporal-entry--year.tl-temporal-entry--high {
  font-size: 15px;
  font-weight: 600;
  opacity: 0.92;
}

[data-tw-domain="family"][data-tw-page="timeline"] .tl-temporal-entry--year.tl-temporal-entry--mid {
  font-size: 13px;
  font-weight: 500;
  opacity: 0.78;
}

[data-tw-domain="family"][data-tw-page="timeline"] .tl-temporal-entry--year.tl-temporal-entry--low {
  font-size: 12px;
  font-weight: 400;
  opacity: 0.58;
}

[data-tw-domain="family"][data-tw-page="timeline"] .tl-temporal-entry--decade {
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.06em;
  opacity: 0.72;
}

[data-tw-domain="family"][data-tw-page="timeline"] .tl-temporal-entry.is-active {
  color: var(--tw-memory-accent);
  opacity: 1;
  transform: scale(1.04);
  transform-origin: left center;
  text-shadow: 0 0 18px color-mix(in srgb, var(--tw-memory-accent) 28%, transparent);
}

[data-tw-domain="family"][data-tw-page="timeline"] .tl-temporal-entry:focus-visible {
  outline: 1px solid color-mix(in srgb, var(--tw-memory-accent) 45%, transparent);
  outline-offset: 3px;
  border-radius: 4px;
}

[data-tw-domain="family"][data-tw-page="timeline"] .tl-temporal-mobile-chip {
  position: fixed;
  left: 50%;
  bottom: 22px;
  transform: translateX(-50%);
  z-index: 40;
  border: 1px solid color-mix(in srgb, var(--tw-border-soft) 80%, transparent);
  border-radius: 999px;
  padding: 8px 16px;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.04em;
  color: var(--tw-memory-accent);
  background: color-mix(in srgb, var(--tw-surface-secondary) 88%, transparent);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  box-shadow: 0 8px 28px color-mix(in srgb, var(--tw-text-primary) 28%, transparent);
  cursor: pointer;
}

[data-tw-domain="family"][data-tw-page="timeline"] .tl-temporal-mobile-chip[hidden] {
  display: none;
}

[data-tw-domain="family"][data-tw-page="timeline"] .tl-temporal-mobile-overlay {
  position: fixed;
  inset: 0;
  z-index: 180;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding: 16px;
  background: color-mix(in srgb, var(--tw-atmosphere-fade) 55%, transparent);
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);
}

[data-tw-domain="family"][data-tw-page="timeline"] .tl-temporal-mobile-overlay[hidden] {
  display: none;
}

[data-tw-domain="family"][data-tw-page="timeline"] .tl-temporal-mobile-panel {
  position: relative;
  width: min(420px, 100%);
  max-height: min(70vh, 520px);
  overflow: auto;
  padding: 18px 18px 16px;
  border-radius: 16px 16px 14px 14px;
  border: 1px solid var(--tw-border-soft);
  background: var(--tw-surface-secondary);
  box-shadow: 0 16px 42px color-mix(in srgb, var(--tw-text-primary) 34%, transparent);
}

[data-tw-domain="family"][data-tw-page="timeline"] .tl-temporal-mobile-title {
  margin: 0 0 14px;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--tw-text-muted);
}

[data-tw-domain="family"][data-tw-page="timeline"] .tl-temporal-mobile-close {
  position: absolute;
  top: 10px;
  right: 10px;
  border: none;
  background: transparent;
  color: var(--tw-text-muted);
  font-size: 16px;
  cursor: pointer;
  padding: 6px 8px;
  border-radius: 8px;
}

[data-tw-domain="family"][data-tw-page="timeline"] .tl-temporal-mobile-list {
  gap: 10px;
}

[data-tw-domain="family"][data-tw-page="timeline"] .tl-temporal-mobile-list .tl-temporal-entry {
  font-size: 15px;
  padding: 6px 0;
}

body.tl-temporal-mobile-open {
  overflow: hidden;
}

@media (max-width: 860px) {
  [data-tw-domain="family"][data-tw-page="timeline"] .timeline-body {
    grid-template-columns: minmax(0, 1fr);
  }

  [data-tw-domain="family"][data-tw-page="timeline"] .tl-temporal-nav {
    display: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  [data-tw-domain="family"][data-tw-page="timeline"] .tl-temporal-entry,
  [data-tw-domain="family"][data-tw-page="timeline"] .tl-temporal-nav {
    transition: none;
  }

  [data-tw-domain="family"][data-tw-page="timeline"] .tl-temporal-entry.is-active {
    transform: none;
    text-shadow: none;
  }
}

[data-tw-domain="family"][data-tw-page="reply"] .original-audio {
  margin-top: 14px;
}

[data-tw-domain="family"][data-tw-page="reply"] .original-audio-label {
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--tw-text-muted);
  margin: 0 0 6px;
}

[data-tw-domain="family"][data-tw-page="reply"] .original-audio audio {
  width: 100%;
  border-radius: 10px;
}

[data-tw-domain="family"][data-tw-page="reply"] .original-transcript {
  margin-top: 12px;
  font-size: 13px;
  color: var(--tw-text-muted);
}

[data-tw-domain="family"][data-tw-page="reply"] .original-transcript-body {
  margin: 8px 0 0;
  white-space: pre-wrap;
  line-height: 1.5;
}

[data-tw-domain="family"][data-tw-page="reply"] .response-author-link {
  color: inherit;
  text-decoration: none;
}

[data-tw-domain="family"][data-tw-page="reply"] .response-author-link:hover {
  text-decoration: underline;
}