:root {
  --bg: #efe6d6;
  --paper: #fbf6ec;
  --paper-2: #f4ebdb;
  --ink: #2b2118;
  --ink-soft: #6e5d4c;
  --rule: #dccdb5;
  --shadow: 0 1px 0 #fff8 inset, 0 18px 40px -18px #5a3d1f55, 0 2px 6px #5a3d1f22;
  --story: #c4532d;
  --recipe: #cf8a1f;
  --health: #2f7d74;
  --vault: #3d4f8f;
  --wisdom: #8a4a7a;
  --alexa: #12c2e9;
  --alexa-2: #3a6df0;
  --serif: "Fraunces", Georgia, serif;
  --sans: "Inter", system-ui, sans-serif;
  --hand: "Caveat", "Segoe Print", cursive;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #15110d; --paper: #211b15; --paper-2: #1b1611; --ink: #f1e7d6; --ink-soft: #b3a28c; --rule: #3a3026;
    --shadow: 0 18px 40px -18px #000c, 0 2px 6px #0006;
    --story: #e47a55; --recipe: #e8a948; --health: #4fb3a6; --vault: #8197e0; --wisdom: #c483b6;
  }
}
:root[data-theme="dark"] {
  --bg: #15110d; --paper: #211b15; --paper-2: #1b1611; --ink: #f1e7d6; --ink-soft: #b3a28c; --rule: #3a3026;
  --shadow: 0 18px 40px -18px #000c, 0 2px 6px #0006;
  --story: #e47a55; --recipe: #e8a948; --health: #4fb3a6; --vault: #8197e0; --wisdom: #c483b6;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--bg); color: var(--ink); font-family: var(--sans); font-size: 15px; line-height: 1.5;
  background-image: radial-gradient(circle at 20% 0%, #fff6 0, transparent 40%),
    repeating-linear-gradient(0deg, transparent 0 3px, #8a6a4008 3px 4px);
  min-height: 100vh;
}
button { font: inherit; color: inherit; cursor: pointer; }
main { max-width: 1180px; margin: 0 auto; padding: 0 16px 140px; display: grid; gap: 28px; }

/* ---------- masthead */
.masthead {
  max-width: 1180px; margin: 0 auto; padding: 28px 16px 18px; display: flex; align-items: center;
  justify-content: space-between; gap: 16px; flex-wrap: wrap;
}
.brand { display: flex; align-items: center; gap: 14px; }
.seal { width: 48px; height: 48px; flex: none; }
.seal circle { fill: var(--story); }
.seal path { fill: none; stroke: var(--paper); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
h1 { font-family: var(--serif); font-weight: 800; font-size: clamp(28px, 4vw, 40px); margin: 0; letter-spacing: -.02em; line-height: 1; }
.tagline { margin: 4px 0 0; font-family: var(--hand); font-size: 21px; color: var(--ink-soft); }
.engine {
  display: inline-flex; align-items: center; gap: 8px; padding: 6px 12px; border-radius: 99px;
  background: var(--paper); border: 1px solid var(--rule); font-size: 13px; color: var(--ink-soft);
}
.engine .dot { width: 8px; height: 8px; border-radius: 50%; background: #aaa; }
.engine.live .dot { background: #2fb36b; box-shadow: 0 0 0 4px #2fb36b33; }
.engine.offline .dot { background: #d99a2b; }

.section-label {
  display: flex; align-items: baseline; justify-content: space-between; gap: 12px; flex-wrap: wrap;
  font-family: var(--serif); font-size: 13px; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-soft);
  margin-bottom: 10px;
}
.section-label .hint { font-family: var(--hand); font-size: 18px; letter-spacing: 0; text-transform: none; }

/* ---------- elders */
.elders { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 16px; }
.elder {
  display: flex; gap: 16px; align-items: center; text-align: left; padding: 16px 18px; border-radius: 18px;
  background: var(--paper); border: 1px solid var(--rule); box-shadow: var(--shadow); transition: transform .2s, border-color .2s;
}
.elder:hover { transform: translateY(-2px); }
.elder.active { border-color: var(--ink); }
.coverage { position: relative; width: 74px; height: 74px; flex: none; border-radius: 50%; }
.coverage::after {
  content: attr(data-initial); position: absolute; inset: 9px; border-radius: 50%; background: var(--paper);
  display: grid; place-items: center; font-family: var(--serif); font-weight: 800; font-size: 26px;
}
.elder h3 { margin: 0; font-family: var(--serif); font-size: 22px; line-height: 1.1; }
.elder .meta { margin: 2px 0 6px; color: var(--ink-soft); font-size: 13px; }
.shelf-pips { display: flex; gap: 6px; flex-wrap: wrap; }
.pip { font-size: 11px; padding: 1px 8px; border-radius: 99px; border: 1px solid currentColor; opacity: .9; }
.pip.missing { border-style: dashed; opacity: .55; }

/* ---------- life ribbon */
.ribbon-wrap { background: var(--paper); border: 1px solid var(--rule); border-radius: 18px; padding: 16px 18px 8px; box-shadow: var(--shadow); }
.ribbon { position: relative; height: 172px; overflow-x: auto; overflow-y: hidden; scrollbar-width: thin; scrollbar-color: var(--rule) transparent; }
.ribbon-inner { position: relative; height: 100%; min-width: 760px; margin: 0 18px; }
.ribbon-line {
  position: absolute; left: 0; right: 0; top: 96px; height: 10px; border-radius: 6px;
  background: linear-gradient(90deg, var(--story), var(--recipe), var(--health), var(--vault), var(--wisdom));
  opacity: .22;
}
.ribbon-life { position: absolute; top: 96px; height: 10px; border-radius: 6px; background: var(--ink); opacity: .14; }
.tick { position: absolute; top: 114px; transform: translateX(-50%); font-family: var(--serif); font-size: 12px; color: var(--ink-soft); }
.tick::before { content: ""; position: absolute; left: 50%; top: -10px; height: 6px; border-left: 1px solid var(--rule); }
.history { position: absolute; top: 138px; transform: translateX(-50%); font-family: var(--hand); font-size: 16px; color: var(--ink-soft); white-space: nowrap; opacity: .8; }
.mem-dot {
  position: absolute; top: 92px; width: 18px; height: 18px; margin-left: -9px; border-radius: 50%; border: 3px solid var(--paper);
  box-shadow: 0 2px 6px #0003; padding: 0; transition: transform .15s;
}
.mem-dot:hover, .mem-dot.active { transform: scale(1.35); }
.mem-flag {
  position: absolute; font-family: var(--hand); font-size: 17px; line-height: 1; white-space: nowrap; pointer-events: none;
  color: var(--ink); padding-left: 8px; border-left: 1.5px solid var(--c); transform: translateX(-1px);
}
.mem-flag.end { padding: 0 8px 0 0; border-left: 0; border-right: 1.5px solid var(--c); transform: translateX(calc(-100% + 1px)); }
.mem-flag.lane0 { top: 74px; height: 18px; }
.mem-flag.lane1 { top: 52px; height: 40px; }
.mem-flag.lane2 { top: 30px; height: 62px; }
.mem-flag.lane3 { top: 8px; height: 84px; }

/* ---------- book */
.book { position: relative; padding-top: 30px; }
.bookmarks { position: absolute; top: 0; right: 28px; display: flex; gap: 6px; z-index: 2; }
.bookmark {
  --c: var(--story); border: 0; background: var(--c); color: #fff; padding: 8px 12px 18px; min-width: 64px;
  font-size: 12px; font-weight: 600; letter-spacing: .02em;
  clip-path: polygon(0 0, 100% 0, 100% 100%, 50% 78%, 0 100%); transition: transform .2s; transform: translateY(6px);
}
.bookmark.active, .bookmark:hover { transform: translateY(-2px); }
.bookmark .n { display: block; font-family: var(--serif); font-size: 16px; line-height: 1; }
.spread {
  display: grid; grid-template-columns: 1fr 28px 1.25fr; min-height: 460px; border-radius: 10px 10px 14px 14px;
  background: var(--paper); box-shadow: var(--shadow), 0 8px 0 -3px var(--paper-2), 0 14px 0 -6px var(--rule);
}
.page { padding: 34px 32px 30px; min-width: 0; }
.gutter { background: linear-gradient(90deg, transparent, #0000001a 45%, #00000026 50%, #0000001a 55%, transparent); }
.page-head h2 { font-family: var(--serif); font-size: 30px; margin: 0; letter-spacing: -.01em; }
.blurb { margin: 2px 0 18px; color: var(--ink-soft); font-family: var(--hand); font-size: 19px; }
.entries { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; counter-reset: e; }
.entry {
  display: grid; grid-template-columns: 52px 1fr; gap: 10px; align-items: baseline; width: 100%; text-align: left;
  padding: 10px 10px; border: 0; background: none; border-radius: 10px; border-bottom: 1px dashed var(--rule);
}
.entry:hover { background: var(--paper-2); }
.entry.active { background: var(--paper-2); box-shadow: inset 3px 0 0 var(--c, var(--story)); }
.entry .yr { font-family: var(--serif); font-weight: 600; color: var(--c, var(--story)); }
.entry .t { font-family: var(--serif); font-size: 17px; }
.entry .who { display: block; font-size: 12px; color: var(--ink-soft); }
.entry.fresh { animation: fresh 1.8s ease-out; }
@keyframes fresh { from { background: color-mix(in srgb, var(--alexa) 30%, transparent); } }
.empty-shelf { font-family: var(--hand); font-size: 20px; color: var(--ink-soft); padding: 10px; }

.right { position: relative; background: linear-gradient(90deg, #0000000a, transparent 30px); }
.empty-reader { height: 100%; display: grid; place-items: center; }
.script { font-family: var(--hand); font-size: 24px; color: var(--ink-soft); }
.reader-kicker { font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: var(--c); font-weight: 600; }
.reader h3 { font-family: var(--serif); font-size: clamp(26px, 3vw, 34px); line-height: 1.1; margin: 6px 0 14px; letter-spacing: -.01em; }
.reader .summary { font-family: var(--serif); font-size: 18px; line-height: 1.6; }
.reader .summary::first-letter {
  float: left; font-size: 3.4em; line-height: .85; padding: 6px 8px 0 0; font-weight: 800; color: var(--c);
}
.own-words {
  margin: 22px 0 0; padding: 14px 18px; background: var(--paper-2); border-radius: 4px; position: relative;
  font-family: var(--hand); font-size: 22px; line-height: 1.35; transform: rotate(-.6deg);
  box-shadow: 0 6px 14px -8px #0004;
}
.own-words::before {
  content: ""; position: absolute; top: -9px; left: 40%; width: 80px; height: 18px; background: #e9d9b4aa; transform: rotate(-3deg);
}
.own-words cite { display: block; font-size: 16px; color: var(--ink-soft); font-style: normal; margin-top: 4px; }
.facts { margin-top: 18px; display: grid; gap: 10px; }
.fact { display: grid; grid-template-columns: 110px 1fr; gap: 10px; font-size: 14px; }
.fact dt { color: var(--ink-soft); font-size: 12px; text-transform: uppercase; letter-spacing: .08em; padding-top: 2px; }
.fact dd { margin: 0; }
.fact ol, .fact ul { margin: 0; padding-left: 18px; }
.redacted-note { margin-top: 14px; font-size: 12px; color: var(--ink-soft); }
.listen { margin-top: 18px; border: 1px solid var(--rule); background: var(--paper); border-radius: 99px; padding: 6px 14px; font-size: 13px; }

/* ---------- handbook */
.hb-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 14px; }
.hb {
  text-align: left; padding: 18px; border-radius: 16px; background: var(--paper); border: 1px solid var(--rule);
  box-shadow: var(--shadow); display: grid; gap: 4px; transition: transform .2s;
}
.hb:hover { transform: translateY(-3px) rotate(-.4deg); }
.hb b { font-family: var(--serif); font-size: 19px; }
.hb small { color: var(--ink-soft); font-size: 13px; }
.hb-icon { font-size: 22px; color: var(--story); }
.hb[data-section="health"] .hb-icon { color: var(--health); }
.hb[data-section="essentials"] .hb-icon { color: var(--vault); }
.hb[data-section="recipes"] .hb-icon { color: var(--recipe); }
.hb.loading { opacity: .6; pointer-events: none; }

dialog { border: 0; padding: 0; border-radius: 6px; max-width: min(760px, calc(100vw - 32px)); width: 100%; background: transparent; }
dialog::backdrop { background: #1a120bb3; backdrop-filter: blur(3px); }
.hb-doc { background: var(--paper); color: var(--ink); max-height: 86vh; overflow: auto; padding: 28px clamp(18px, 5vw, 56px) 40px; }
.hb-actions { display: flex; justify-content: flex-end; gap: 8px; position: sticky; top: -28px; padding-top: 8px; background: var(--paper); }
.hb-actions button { border: 1px solid var(--rule); background: var(--paper-2); border-radius: 99px; padding: 6px 16px; }
.doc h1 { font-family: var(--serif); font-size: 32px; line-height: 1.1; }
.doc h2 { font-family: var(--serif); font-size: 21px; margin-top: 26px; border-bottom: 1px solid var(--rule); padding-bottom: 4px; }
.doc h3 { font-family: var(--serif); }
.doc p, .doc li { font-family: var(--serif); font-size: 16px; line-height: 1.6; }
.doc .stamp { font-family: var(--hand); color: var(--ink-soft); font-size: 18px; }

/* ---------- Alexa dock */
.alexa { position: fixed; right: 20px; bottom: 20px; z-index: 20; display: flex; flex-direction: column; align-items: flex-end; gap: 12px; }
.ring {
  position: relative; width: 84px; height: 84px; border-radius: 50%; border: 0; padding: 0;
  background: radial-gradient(circle at 50% 35%, #3b3b42, #141418 70%); box-shadow: 0 12px 30px -8px #000a;
}
.ring-light {
  position: absolute; inset: 0; border-radius: 50%; padding: 6px;
  background: conic-gradient(from 0deg, #0e2a3a, #0e2a3a);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude;
  transition: background .3s;
}
.ring-core { position: relative; color: #9fb7c4; font-size: 12px; letter-spacing: .1em; text-transform: lowercase; }
.alexa[data-state="listening"] .ring-light { background: conic-gradient(var(--alexa), var(--alexa)); box-shadow: 0 0 24px var(--alexa); }
.alexa[data-state="listening"] .ring { animation: breathe 1.2s ease-in-out infinite; }
.alexa[data-state="thinking"] .ring-light { background: conic-gradient(from var(--a, 0deg), var(--alexa-2), var(--alexa) 30%, var(--alexa-2) 60%, #0e2a3a); animation: spin 1s linear infinite; }
.alexa[data-state="speaking"] .ring-light { background: conic-gradient(var(--alexa), var(--alexa-2), var(--alexa)); animation: pulse .7s ease-in-out infinite alternate; }
@property --a { syntax: "<angle>"; inherits: false; initial-value: 0deg; }
@keyframes spin { to { --a: 360deg; } }
@keyframes pulse { from { opacity: .55; } to { opacity: 1; } }
@keyframes breathe { 50% { transform: scale(1.05); } }

.alexa-panel {
  width: min(380px, calc(100vw - 32px)); background: #121318; color: #e7eef2; border-radius: 22px; padding: 14px;
  box-shadow: 0 24px 60px -16px #000c; display: none; flex-direction: column; gap: 10px; font-size: 14px;
}
.alexa.open .alexa-panel { display: flex; }
.alexa-head { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.modes { display: flex; background: #1f2128; border-radius: 99px; padding: 3px; }
.mode { border: 0; background: none; color: #9aa6ae; padding: 6px 12px; border-radius: 99px; font-size: 13px; }
.mode.active { background: #2d3340; color: #fff; }
.close { border: 0; background: none; color: #9aa6ae; font-size: 22px; line-height: 1; }
.convo { max-height: 46vh; min-height: 120px; overflow-y: auto; display: flex; flex-direction: column; gap: 8px; padding: 4px 2px; }
.bubble { padding: 9px 13px; border-radius: 16px; max-width: 88%; line-height: 1.45; white-space: pre-wrap; }
.bubble.alexa-says { background: linear-gradient(135deg, #16394a, #1b2c5a); align-self: flex-start; border-bottom-left-radius: 4px; }
.bubble.user-says { background: #2a2d36; align-self: flex-end; border-bottom-right-radius: 4px; }
.bubble .tag { display: block; font-size: 11px; color: #7fd9ef; margin-bottom: 2px; letter-spacing: .04em; }
.bubble .src { display: block; margin-top: 6px; font-size: 11px; color: #8fa3b5; }
.bubble.sys { align-self: center; background: none; color: #7c8790; font-size: 12px; padding: 2px; text-align: center; }
.say { display: flex; gap: 6px; }
.say input { flex: 1; min-width: 0; background: #1f2128; border: 1px solid #2c303a; color: #fff; border-radius: 99px; padding: 10px 14px; font: inherit; }
.say button { border: 0; border-radius: 50%; width: 40px; background: var(--alexa); color: #062431; font-weight: 700; }
.mcp-note { margin: 0; font-size: 11px; color: #6c7780; text-align: center; }
.mcp-note code { color: #9fd8e8; }

@media (max-width: 760px) {
  .spread { grid-template-columns: 1fr; }
  .gutter { height: 14px; background: linear-gradient(180deg, transparent, #0000001a 50%, transparent); }
  .page { padding: 24px 18px; }
  .bookmarks { right: 8px; left: 8px; overflow-x: auto; }
  .bookmark { min-width: 58px; padding: 6px 8px 16px; }
  .fact { grid-template-columns: 1fr; gap: 2px; }
  .ring { width: 70px; height: 70px; }
}

@media print {
  body * { visibility: hidden; }
  dialog, dialog * { visibility: visible; }
  dialog { position: absolute; inset: 0; max-width: none; }
  .hb-doc { max-height: none; overflow: visible; }
  .hb-actions { display: none; }
}

/* ================================================================= motion */
@keyframes rise { from { opacity: 0; transform: translateY(18px); } }
@keyframes drop { from { opacity: 0; transform: translateY(-14px); } }
@keyframes pop { 0% { opacity: 0; transform: scale(.2); } 70% { transform: scale(1.25); } }
@keyframes draw { from { transform: scaleX(0); } }
@keyframes fadein { from { opacity: 0; } }
@keyframes ringin { from { transform: rotate(-200deg) scale(.6); opacity: 0; } }
@keyframes turn {
  0% { transform: perspective(1400px) rotateY(-28deg); transform-origin: left center; opacity: .2; filter: brightness(.85); }
  100% { transform: none; opacity: 1; }
}
@keyframes slidein { from { opacity: 0; transform: translateX(-14px); } }
@keyframes bubble { from { opacity: 0; transform: translateY(8px) scale(.96); } }
@keyframes panel { from { opacity: 0; transform: translateY(24px) scale(.94); transform-origin: bottom right; } }
@keyframes unfold { from { opacity: 0; transform: perspective(1200px) rotateX(-12deg) translateY(30px); } }
@keyframes idle { 50% { box-shadow: 0 0 0 6px #12c2e914, 0 12px 30px -8px #000a; } }
@keyframes dots { 0%, 80%, 100% { opacity: .25; transform: translateY(0); } 40% { opacity: 1; transform: translateY(-3px); } }
@keyframes lamp { 50% { transform: translate(4%, 3%) scale(1.06); } }
@keyframes wave { 0%, 100% { transform: scaleY(.3); } 50% { transform: scaleY(1); } }

body::before {
  content: ""; position: fixed; inset: -20% -10% auto auto; width: 70vw; height: 70vw; pointer-events: none; z-index: -1;
  background: radial-gradient(circle, color-mix(in srgb, var(--recipe) 14%, transparent), transparent 60%);
  animation: lamp 14s ease-in-out infinite;
}
.masthead { animation: drop .7s cubic-bezier(.2,.8,.2,1) both; }
.seal { animation: pop .8s .2s cubic-bezier(.2,.8,.2,1) both; }
main > section { animation: rise .7s cubic-bezier(.2,.8,.2,1) both; }
main > section:nth-child(1) { animation-delay: .1s; }
main > section:nth-child(2) { animation-delay: .22s; }
main > section:nth-child(3) { animation-delay: .34s; }
main > section:nth-child(4) { animation-delay: .46s; }
main > section:nth-child(5) { animation-delay: .58s; }
main > section:nth-child(6) { animation-delay: .7s; }
main > section:nth-child(7) { animation-delay: .82s; }

[data-anim] .elder { animation: rise .6s calc(.15s + var(--i, 0) * .12s) cubic-bezier(.2,.8,.2,1) both; }
[data-anim] .coverage { animation: ringin 1.1s calc(.3s + var(--i, 0) * .12s) cubic-bezier(.2,.8,.2,1) both; }
.elder:hover .coverage { transform: rotate(24deg); transition: transform .6s cubic-bezier(.2,.8,.2,1); }
[data-anim] .pip { animation: fadein .4s calc(.6s + var(--j, 0) * .06s) both; }

.ribbon-line, .ribbon-life { transform-origin: left; }
[data-anim] .ribbon-line, [data-anim] .ribbon-life { animation: draw 1.4s cubic-bezier(.6,0,.2,1) both; }
[data-anim] .ribbon-life { animation-delay: .2s; }
[data-anim] .tick, [data-anim] .history { animation: fadein .6s calc(.4s + var(--i, 0) * .05s) both; }
[data-anim] .mem-dot { animation: pop .5s calc(.5s + var(--i, 0) * .09s) cubic-bezier(.2,.8,.2,1) both; }
.mem-dot.active { box-shadow: 0 0 0 5px color-mix(in srgb, currentColor 0%, transparent), 0 0 0 7px var(--paper), 0 0 16px 4px var(--c, #fff6); }
[data-anim] .mem-flag { animation: slidein .5s calc(.65s + var(--i, 0) * .09s) both; }

.bookmark { transition: transform .35s cubic-bezier(.3,1.6,.5,1), filter .2s; }
.bookmark:hover { filter: brightness(1.08); }
.bookmark.active { transform: translateY(-6px); }
.entry { transition: background .2s, transform .2s; }
[data-anim] .entry { animation: slidein .4s calc(var(--i, 0) * .05s) cubic-bezier(.2,.8,.2,1) both; }
.entry:hover { transform: translateX(4px); }
.reader.turning { animation: turn .65s cubic-bezier(.2,.8,.2,1) both; }
.reader.turning .summary { animation: fadein .8s .25s both; }
.reader.turning .own-words { animation: rise .7s .4s cubic-bezier(.2,.8,.2,1) both; }
.reader.turning .facts { animation: fadein .6s .55s both; }
.listen { transition: background .2s, transform .2s; }
.listen:hover { transform: translateY(-1px); background: var(--paper-2); }
.listen.playing { border-color: var(--c); color: var(--c); }
.eq { display: inline-flex; gap: 2px; height: 10px; margin-right: 6px; vertical-align: -1px; }
.eq i { width: 2px; background: currentColor; animation: wave .8s ease-in-out infinite; }
.eq i:nth-child(2) { animation-delay: .15s; } .eq i:nth-child(3) { animation-delay: .3s; }

.hb { transition: transform .35s cubic-bezier(.3,1.4,.5,1), box-shadow .3s; }
.hb:hover { box-shadow: var(--shadow), 0 20px 30px -20px #0006; }
.hb-icon { display: inline-block; transition: transform .5s cubic-bezier(.3,1.6,.5,1); }
.hb:hover .hb-icon { transform: rotate(-14deg) scale(1.25); }
.hb.loading .hb-icon { animation: spin2 1s linear infinite; }
@keyframes spin2 { to { transform: rotate(360deg); } }
dialog[open] .hb-doc { animation: unfold .5s cubic-bezier(.2,.8,.2,1) both; }
dialog[open]::backdrop { animation: fadein .3s both; }

.alexa.open .alexa-panel { animation: panel .35s cubic-bezier(.2,.8,.2,1) both; }
.alexa[data-state="idle"] .ring { animation: idle 3.2s ease-in-out infinite; }
.bubble { animation: bubble .35s cubic-bezier(.2,.8,.2,1) both; }
.typing { display: inline-flex; gap: 4px; padding: 4px 2px; }
.typing i { width: 6px; height: 6px; border-radius: 50%; background: #7fd9ef; animation: dots 1.2s infinite; }
.typing i:nth-child(2) { animation-delay: .15s; } .typing i:nth-child(3) { animation-delay: .3s; }
.voice-row { display: flex; align-items: center; gap: 8px; font-size: 12px; color: #8a96a0; }
.voice-row select { flex: 1; min-width: 0; background: #1f2128; color: #e7eef2; border: 1px solid #2c303a; border-radius: 8px; padding: 5px 8px; font: inherit; }
.voice-row button { border: 1px solid #2c303a; background: #1f2128; border-radius: 8px; padding: 5px 10px; color: #cfe; }
.word-on { background: #12c2e94d; border-radius: 3px; box-shadow: 0 0 0 2px #12c2e94d; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001s !important; animation-delay: 0s !important; animation-iteration-count: 1 !important; transition-duration: .001s !important; }
}

/* ---------- hero scene (original illustration, animated) */
.hero {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: 28px; align-items: center;
  padding: 26px; border-radius: 28px; background: var(--paper); border: 1px solid var(--rule); box-shadow: var(--shadow);
  overflow: hidden;
}
.hero-kicker { margin: 0 0 6px; font-family: var(--hand); font-size: 24px; color: var(--story); }
.hero h2 { margin: 0; font-family: var(--serif); font-weight: 800; font-size: clamp(26px, 3.4vw, 40px); line-height: 1.08; letter-spacing: -.02em; }
.hero-sub { margin: 14px 0 20px; color: var(--ink-soft); font-size: 16px; max-width: 46ch; }
.hero-cta {
  border: 0; border-radius: 99px; padding: 12px 20px; font-weight: 600; color: #fff;
  background: linear-gradient(135deg, var(--story), var(--recipe)); box-shadow: 0 10px 24px -10px var(--story);
  transition: transform .2s, box-shadow .2s;
}
.hero-cta:hover { transform: translateY(-2px); box-shadow: 0 14px 30px -10px var(--story); }
.hero-cta span { display: inline-block; transition: transform .2s; }
.hero-cta:hover span { transform: translateX(4px); }
.scene { width: 100%; height: auto; display: block; border-radius: 22px; }
.scene * { transform-box: fill-box; }

.hero-copy > * { animation: rise .8s cubic-bezier(.2,.8,.2,1) both; }
.hero-copy > :nth-child(2) { animation-delay: .15s; }
.hero-copy > :nth-child(3) { animation-delay: .3s; }
.hero-copy > :nth-child(4) { animation-delay: .45s; }
.scene { animation: fadein 1.2s .2s both; }

.scene .glow { transform-origin: center; animation: glow 4s ease-in-out infinite; }
.scene .candle-halo { transform-origin: center; animation: glow 1.6s ease-in-out infinite; }
.scene .flame { transform-origin: 50% 100%; animation: flicker 1.3s ease-in-out infinite; }
.scene .flame + .flame { animation-duration: .9s; }
.scene .star { animation: twinkle 3s ease-in-out infinite; }
.scene .s2 { animation-delay: .8s; } .scene .s3 { animation-delay: 1.6s; } .scene .s4 { animation-delay: 2.3s; }
.scene .curtain { transform-origin: 50% 0; animation: sway 7s ease-in-out infinite; }
.scene .c2 { animation-delay: -3s; }
.scene .garland { transform-origin: 50% 0; animation: sway 9s ease-in-out infinite; }
.scene .head { transform-origin: 50% 90%; animation: nod 6s ease-in-out infinite; }
.scene .eyes ellipse { transform-origin: center; animation: blink 5s infinite; }
.scene .kid-a { transform-origin: 50% 100%; animation: lean 5s ease-in-out infinite; }
.scene .kid-b { transform-origin: 50% 100%; animation: lean 5.6s -2s ease-in-out infinite reverse; }
.scene .kid ellipse { transform-origin: center; animation: blink 6.5s 1.2s infinite; }
.scene .braid { transform-origin: 50% 0; animation: sway 4s ease-in-out infinite; }
.scene .leaf { transform-origin: 0 50%; animation: leaf 6s cubic-bezier(.5,0,.3,1) infinite; }
.scene .page-glow { transform-origin: center; animation: glow 2.6s ease-in-out infinite; }
.scene .spark { opacity: 0; animation: spark 5s var(--d, 0s) ease-out infinite; }
.scene .tail { transform-origin: 0 100%; animation: tail 2.4s ease-in-out infinite; }
.scene .cat-eye { transform-origin: center; animation: blink 4s 2s infinite; }

@keyframes glow { 50% { opacity: .78; transform: scale(.96); } }
@keyframes flicker { 25% { transform: scale(.92, 1.08) skewX(3deg); } 50% { transform: scale(1.04, .94); } 75% { transform: scale(.96, 1.05) skewX(-3deg); } }
@keyframes twinkle { 50% { opacity: .2; } }
@keyframes sway { 50% { transform: rotate(1.6deg); } }
@keyframes nod { 30%, 60% { transform: rotate(-3deg) translateY(2px); } }
@keyframes blink { 0%, 92%, 100% { transform: scaleY(1); } 95% { transform: scaleY(.1); } }
@keyframes lean { 50% { transform: rotate(1.8deg) translateY(-2px); } }
@keyframes leaf { 0%, 55% { transform: scaleX(1); } 75% { transform: scaleX(-1); opacity: .9; } 76%, 100% { transform: scaleX(1); opacity: 0; } }
@keyframes spark { 0% { opacity: 0; transform: translate(0, 0) scale(.6); } 15% { opacity: 1; }
  100% { opacity: 0; transform: translate(calc(var(--dx, 18px)), -190px) scale(1.3) rotate(20deg); } }
@keyframes tail { 50% { transform: rotate(-22deg); } }
.scene .spark:nth-child(2n) { --dx: -26px; } .scene .spark:nth-child(3n) { --dx: 34px; }

@media (max-width: 760px) {
  .hero { grid-template-columns: 1fr; padding: 18px; gap: 18px; }
  .scene { order: -1; }
}

/* ---------- gap engine */
.gaps { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.gap {
  display: grid; grid-template-columns: 56px minmax(0, 1fr) auto; gap: 14px; align-items: center; padding: 12px 16px;
  background: var(--paper); border: 1px solid var(--rule); border-left: 4px solid var(--c); border-radius: 14px;
  box-shadow: var(--shadow);
}
.gap.done { display: block; border-left-color: var(--health); color: var(--ink-soft); font-family: var(--hand); font-size: 20px; }
.gap-score {
  --s: 0; width: 52px; height: 52px; border-radius: 50%; display: grid; place-items: center;
  background: conic-gradient(var(--c) calc(var(--s) * 3.6deg), var(--rule) 0);
}
.gap-score b {
  width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; background: var(--paper);
  font-family: var(--serif); font-size: 16px;
}
.gap-body { display: grid; gap: 2px; min-width: 0; }
.gap-kind { font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--c); font-weight: 600; }
.gap-q { font-family: var(--serif); font-size: 16px; }
.gap-why { font-size: 13px; color: var(--ink-soft); }
.gap-ask {
  border: 1px solid var(--c); background: transparent; color: var(--c); border-radius: 99px; padding: 7px 14px;
  font-weight: 600; font-size: 13px; white-space: nowrap; transition: background .2s, color .2s;
}
.gap-ask:hover { background: var(--c); color: var(--paper); }
[data-anim] .gap { animation: slidein .5s calc(.1s + var(--i, 0) * .08s) cubic-bezier(.2,.8,.2,1) both; }
[data-anim] .gap-score { animation: ringin .9s calc(.2s + var(--i, 0) * .08s) cubic-bezier(.2,.8,.2,1) both; }

/* ---------- provenance, translation, two versions */
.provenance { margin: 4px 0 10px; font-size: 12.5px; color: var(--ink-soft); }
.prov {
  display: inline-block; margin-left: 6px; padding: 1px 7px; border-radius: 99px; font-size: 10px; letter-spacing: .04em;
  text-transform: none; font-weight: 600; vertical-align: 1px; cursor: help;
}
.prov.said { background: color-mix(in srgb, var(--health) 16%, transparent); color: var(--health); }
.prov.inferred { background: color-mix(in srgb, var(--recipe) 18%, transparent); color: var(--recipe); border: 1px dashed currentColor; }
.translation { margin: -4px 0 14px; padding: 10px 14px; border-radius: 10px; background: var(--paper-2); font-size: 14px; }
.translation span {
  display: block; font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-soft); margin-bottom: 2px;
}
.versions {
  display: grid; gap: 3px; margin: 0 0 14px; padding: 10px 14px; border-radius: 12px; font-size: 13.5px;
  background: color-mix(in srgb, var(--wisdom) 10%, transparent); border: 1px dashed var(--wisdom);
}
.versions b { color: var(--wisdom); font-size: 11px; letter-spacing: .14em; text-transform: uppercase; }
.versions a { color: var(--wisdom); }
.versions small { color: var(--ink-soft); }
.reader.turning .versions { animation: pop .6s .3s cubic-bezier(.2,.8,.2,1) both; }
.mem-dot.disputed { outline: 2px dashed var(--wisdom); outline-offset: 3px; }
.bubble .skip {
  display: block; margin-top: 8px; border: 1px solid #3a4250; background: transparent; color: #9fb3c4;
  border-radius: 99px; padding: 3px 10px; font-size: 11px;
}
.bubble .skip:hover { color: #fff; border-color: var(--alexa); }

@media (max-width: 760px) {
  .gap { grid-template-columns: 44px minmax(0, 1fr); }
  .gap-score { width: 44px; height: 44px; } .gap-score b { width: 34px; height: 34px; font-size: 14px; }
  .gap-ask { grid-column: 1 / -1; justify-self: start; }
}

/* ---------- family graph */
.graph-card {
  display: grid; grid-template-columns: minmax(0, 1fr) 260px; background: var(--paper); border: 1px solid var(--rule);
  border-radius: 18px; box-shadow: var(--shadow); overflow: hidden;
}
.graph { width: 100%; height: auto; display: block; }
.graph .edge { stroke: var(--ink-soft); opacity: .35; stroke-linecap: round; transition: opacity .3s; }
.graph .edge.context { stroke-dasharray: 4 6; }
.graph .edge.dim { opacity: .06; }
.graph .gnode { cursor: pointer; transition: opacity .3s; outline: none; }
.graph .gnode.dim { opacity: .25; }
.graph .gnode circle { stroke: var(--paper); stroke-width: 3; transition: transform .25s; transform-box: fill-box; transform-origin: center; }
.graph .gnode:hover circle, .graph .gnode:focus-visible circle, .graph .gnode.focus circle { transform: scale(1.18); }
.graph .gnode.focus circle { stroke: var(--ink); }
.graph .gnode.event circle { stroke-dasharray: 3 3; stroke: var(--paper); }
.graph text { font-family: var(--hand); font-size: 17px; fill: var(--ink); text-anchor: middle; pointer-events: none; }
.graph text.in { font-family: var(--serif); font-weight: 600; font-size: 14px; fill: #fff; }
.graph text.legend { font-family: var(--sans); font-size: 11px; fill: var(--ink-soft); text-anchor: start; }
.graph-side { border-left: 1px solid var(--rule); padding: 18px; background: var(--paper-2); max-height: 420px; overflow: auto; }
.graph-side h4 { margin: 0; font-family: var(--serif); font-size: 20px; }
.graph-side .graph-kind { margin: 2px 0 10px; font-size: 12px; color: var(--ink-soft); }
.graph-side ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.graph-side a { display: grid; grid-template-columns: 40px 1fr; gap: 0 6px; text-decoration: none; color: var(--ink); padding: 6px 8px; border-radius: 8px; font-size: 14px; }
.graph-side a:hover { background: var(--paper); }
.graph-side a span { grid-row: span 2; font-family: var(--serif); color: var(--ink-soft); }
.graph-side a small { color: var(--ink-soft); font-size: 11px; }
.graph .edge { animation: fadein .6s calc(.2s + var(--i, 0) * .04s) both; }
.graph .gnode { animation: pop .6s calc(.1s + var(--i, 0) * .05s) cubic-bezier(.2,.8,.2,1) both; }
.graph .gnode circle { transform-box: fill-box; }

/* ---------- photos, their voice, suggestions */
.media { display: grid; gap: 10px; margin-top: 14px; }
.photo { margin: 0; background: #fff; padding: 8px 8px 6px; border-radius: 4px; box-shadow: 0 6px 18px -8px #0006; transform: rotate(-1deg); max-width: 320px; }
.photo img { width: 100%; display: block; border-radius: 2px; filter: sepia(.15); }
.photo figcaption { font-family: var(--hand); font-size: 17px; color: #4a3a2a; margin-top: 4px; }
.voice { display: grid; gap: 4px; padding: 10px 12px; border-radius: 12px; background: color-mix(in srgb, var(--story) 10%, transparent); }
.voice-label { font-size: 12px; font-weight: 600; color: var(--story); }
.voice audio { width: 100%; height: 36px; }
.reader-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
.reader-actions .ghost {
  border: 1px solid var(--rule); background: transparent; border-radius: 99px; padding: 6px 12px; font-size: 13px; color: var(--ink-soft);
}
.reader-actions .ghost:hover { color: var(--ink); border-color: var(--ink-soft); }
.recording { color: #fff !important; background: #d64545 !important; border-color: #d64545 !important; animation: breathe 1.2s infinite; }
.suggestions, .sug-form {
  margin-top: 14px; display: grid; gap: 8px; padding: 12px 14px; border-radius: 12px; background: var(--paper-2); border: 1px solid var(--rule); font-size: 13.5px;
}
.suggestions > b, .sug-form > b { font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-soft); }
.sug { display: flex; justify-content: space-between; gap: 10px; flex-wrap: wrap; align-items: center; padding: 8px 0; border-top: 1px dashed var(--rule); }
.sug small { display: block; color: var(--ink-soft); }
.sug del { color: var(--ink-soft); } .sug ins { text-decoration: none; font-weight: 600; color: var(--health); }
.sug.declined ins { color: var(--ink-soft); text-decoration: line-through; }
.sug-status { font-size: 12px; color: var(--ink-soft); }
.sug-btns { display: flex; gap: 6px; }
.sug-btns button, .sug-form button { border: 1px solid var(--rule); background: var(--paper); border-radius: 99px; padding: 5px 12px; font-size: 12.5px; }
.sug-btns button[data-ok="1"], .sug-form button[type="submit"] { background: var(--health); border-color: var(--health); color: #fff; }
.sug-note { color: var(--ink-soft); font-size: 11.5px; }
.sug-form label { display: grid; grid-template-columns: 90px 1fr; align-items: center; gap: 8px; font-size: 12px; color: var(--ink-soft); }
.sug-form input, .sug-form select { font: inherit; font-size: 13.5px; padding: 6px 10px; border-radius: 8px; border: 1px solid var(--rule); background: var(--paper); color: var(--ink); }
.toast {
  position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%); z-index: 50; background: var(--ink); color: var(--paper);
  padding: 10px 16px; border-radius: 10px; font-size: 14px; animation: rise .3s both;
}

/* Alexa dock attachments */
.say .tool { width: 34px; flex: none; border: 1px solid #2c303a; background: #1f2128; border-radius: 50%; font-size: 15px; padding: 0; }
.attach { display: flex; flex-wrap: wrap; gap: 6px; }
.attach .chip { display: inline-flex; align-items: center; gap: 6px; background: #1f2128; border: 1px solid #2c303a; color: #cfe; border-radius: 99px; padding: 3px 4px 3px 8px; font-size: 11px; }
.attach .chip img { width: 22px; height: 22px; object-fit: cover; border-radius: 50%; }
.attach .chip button { border: 0; background: transparent; color: #8a96a0; }
.bubble-photo { max-width: 180px; border-radius: 8px; display: block; }

@media (max-width: 760px) {
  .graph-card { grid-template-columns: 1fr; }
  .graph-side { border-left: 0; border-top: 1px solid var(--rule); max-height: none; }
  .sug-form label { grid-template-columns: 1fr; }
}