/* Namespaced companion styles. The site's typography and palette stay in charge. */
letter-character:not([data-character-mounted]) { display: none; }
letter-character {
  --lc-ratio: 768 / 1152;
  display: flex;
  align-items: center;
  gap: 15px;
  position: sticky;
  top: 0;
  z-index: 9;
  min-height: 82px;
  padding: 5px max(24px, calc((100vw - 1040px) / 2));
  background: var(--paper, #f7f3ec);
  border-block: 1px solid #dddcd066;
  color: var(--ink, #3e483e);
  isolation: isolate;
}
/* A separate reading strip on touch screens; a reserved page gutter on desktop. */
@media (max-width: 1279px) {
  html:has(letter-character) { scroll-padding-top: 104px; }
}
.lc-stage { position: relative; flex: 0 0 48px; width: 48px; aspect-ratio: var(--lc-ratio); }
.lc-pose, .lc-layer { position: absolute; inset: 0; }
.lc-pose { transform-origin: 50% 96%; transition: transform 220ms ease; }
.lc-layer { opacity: 0; transition: opacity 220ms ease; pointer-events: none; }
.lc-layer.is-current { opacity: 1; }
.lc-image { width: 100%; height: 100%; object-fit: contain; object-position: center bottom; }
.lc-ground { position: absolute; bottom: 0; left: 23%; width: 54%; height: 3%; background: #8c877227; border-radius: 50%; }
.lc-copy { min-width: 0; flex: 1; }
.lc-caption { display: block; margin-bottom: 7px; color: var(--muted, #899083); font-size: 9px; letter-spacing: 2px; }
.lc-note { font-family: var(--serif, serif); font-size: 15px; line-height: 1.6; letter-spacing: 1px; min-height: 24px; }
.lc-actions { display: flex; align-items: center; flex: 0 0 auto; }
.lc-heart, .lc-collapse { display: grid; place-items: center; width: 44px; height: 44px; padding: 0; border-radius: 50%; }
.lc-heart { color: #a98077; transition: transform 180ms ease, background 180ms ease; }
.lc-heart svg { width: 21px; height: 21px; }
.lc-heart:hover { background: #c8a8a014; transform: scale(1.06); }
.lc-collapse { color: #899083; font-size: 20px; }
.lc-collapse > span { display: inline-block; transition: transform 180ms ease; }
letter-character[data-collapsed="true"] { min-height: 46px; }
letter-character[data-collapsed="true"] .lc-stage,
letter-character[data-collapsed="true"] .lc-note { display: none; }
letter-character[data-collapsed="true"] .lc-caption { margin: 0; }
letter-character[data-collapsed="true"] .lc-collapse > span { transform: rotate(180deg); }

/* A deliberately simple, replaceable paper doll; no unrelated person images. */
.lc-doll { position: absolute; inset: 5% 10% 4%; }
.lc-doll span, .lc-doll i { display: block; position: absolute; }
.lc-hair-back { left: 7%; top: 0; width: 86%; height: 72%; border-radius: 46% 46% 28% 26%; background: #7b6558; box-shadow: inset -5px 0 #6e594e; }
.lc-neck { top: 36%; left: 42%; width: 16%; height: 14%; background: #e4bda2; }
.lc-shirt { top: 42%; left: 21%; width: 58%; height: 31%; background: #a4bbce; border-radius: 18% 18% 5% 5%; }
.lc-shirt::after { content: ''; position: absolute; left: 49%; top: 20%; bottom: 0; width: 1px; background: #f7f3ec88; }
.lc-skirt { top: 70%; left: 19%; width: 62%; height: 14%; background: #777775; clip-path: polygon(10% 0,90% 0,100% 95%,0 95%); }
.lc-arm { top: 44%; width: 15%; height: 28%; border-radius: 40% 40% 45% 45%; background: linear-gradient(#a4bbce 0 76%, #e9c7ae 77%); transform-origin: 50% 10%; transition: transform 220ms ease; }
.lc-arm-left { left: 19%; transform: rotate(12deg); }
.lc-arm-right { right: 19%; transform: rotate(-12deg); }
.lc-boot { bottom: 1%; width: 24%; height: 22%; border-radius: 8% 8% 20% 20%; background: linear-gradient(#e9c7ae 0 22%, #967c64 23% 91%, #806a57 92%); }
.lc-boot-left { left: 25%; transform: rotate(3deg); }
.lc-boot-right { right: 25%; transform: rotate(-3deg); }
.lc-face { top: 10%; left: 20%; width: 60%; height: 33%; border-radius: 46% 46% 45% 45%; background: #efd2ba; }
.lc-eye { top: 47%; width: 9%; height: 11%; border-radius: 50%; background: #665248; transform-origin: center; }
.lc-eye-left { left: 23%; }
.lc-eye-right { right: 23%; }
.lc-smile { top: 67%; left: 41%; width: 18%; height: 10%; border-bottom: 1px solid #ba8779; border-radius: 50%; }
.lc-fringe { top: 2%; left: 15%; width: 70%; height: 24%; background: #7b6558; border-radius: 70% 40% 60% 10%; transform: rotate(-9deg); clip-path: polygon(0 0,100% 0,100% 70%,62% 45%,27% 100%,0 100%); }
.lc-earring { top: 32%; width: 10%; height: 8%; border: 2px solid #6d9995; border-radius: 50%; }
.lc-earring-left { left: 16%; }
.lc-earring-right { right: 16%; }
.lc-scarf { top: 43%; left: 24%; width: 52%; height: 19%; background: #737c79; clip-path: polygon(0 0,48% 40%,100% 0,93% 27%,58% 70%,62% 100%,42% 100%,44% 70%,6% 27%); }
.lc-cheek { top: 62%; width: 21%; height: 10%; background: #d9958c; border-radius: 50%; opacity: .12; transition: opacity 220ms ease; }
.lc-cheek-left { left: 7%; }
.lc-cheek-right { right: 7%; }
.lc-book { top: 61%; left: 15%; width: 70%; height: 17%; opacity: 0; border: 1px solid #879b83; border-radius: 8% 8% 20% 20%; background: #dce2cb; transform: rotate(0deg); transition: opacity 220ms ease; }
.lc-book i { left: 50%; top: 2%; bottom: 4%; width: 1px; background: #9dab95; }
.lc-thought { position: absolute; right: -8%; top: 4%; display: flex; align-items: center; gap: 3px; padding: 6px; background: #fffdf7; border: 1px solid #dddcd0; border-radius: 50%; opacity: 0; transition: opacity 220ms ease; }
.lc-thought i { width: 2px; height: 2px; border-radius: 50%; background: #899083; }
.lc-love { position: absolute; color: #b8847d; font-family: Georgia, serif; font-size: 22px; opacity: 0; }
.lc-love-one { top: 22%; left: -12%; }
.lc-love-two { top: 2%; right: -8%; font-size: 15px; }
.lc-blush { position: absolute; top: 29%; width: 7%; height: 3%; border-radius: 50%; background: #d9958c; opacity: 0; transition: opacity 220ms ease; }
.lc-blush-left { left: 31%; }.lc-blush-right { right: 31%; }
letter-character[data-state="shy"] .lc-cheek { opacity: .7; }
letter-character[data-state="shy"] .lc-blush { opacity: .3; }
letter-character[data-state="shy"] .lc-pose { transform: rotate(-3deg); }
letter-character[data-state="reading"] .lc-book,
letter-character[data-state="thinking"] .lc-book,
letter-character[data-state="thinking"] .lc-thought { opacity: 1; }
letter-character[data-state="reading"] .lc-boot { transform: translate(9%, -13%) rotate(-28deg); transform-origin: center top; }
letter-character[data-state="welcome"] .lc-arm-right { animation: lc-wave 1.8s ease-in-out; }
letter-character[data-state="welcome"] .lc-pose { animation: lc-greet 1.8s ease-in-out; }
letter-character[data-state="happy"] .lc-pose { animation: lc-jump 900ms ease-in-out; }
letter-character[data-state="heart"] .lc-pose { animation: lc-heartbeat 1400ms ease-in-out; }
letter-character[data-state="heart"] .lc-love { animation: lc-hearts 1400ms ease-out both; }
letter-character[data-state="heart"] .lc-arm-left { transform: rotate(-45deg); }
letter-character[data-state="heart"] .lc-arm-right { transform: rotate(45deg); }
letter-character[data-resting="true"] .lc-eye { animation: lc-blink 1s linear; }
letter-character[data-resting="true"] .lc-pose { animation: lc-sway 1s ease-in-out; }
@keyframes lc-wave { 0%,100% { transform: rotate(-12deg); } 20%,55% { transform: rotate(-135deg); } 35%,70% { transform: rotate(-112deg); } }
@keyframes lc-greet { 0%,100% { transform: rotate(0); } 25%,65% { transform: rotate(-3deg); } 45%,80% { transform: rotate(2deg); } }
@keyframes lc-jump { 0%,100% { transform: translateY(0) scale(1); } 20% { transform: translateY(2%) scale(.98,1.01); } 45% { transform: translateY(-9%) scale(1.02,.99); } 75% { transform: translateY(1%) scale(1); } }
@keyframes lc-heartbeat { 0%,100% { transform: scale(1); } 30%,65% { transform: scale(1.045); } 45% { transform: scale(1.01); } }
@keyframes lc-hearts { 0% { opacity: 0; transform: translateY(10%) scale(.8); } 25%,70% { opacity: .9; } 100% { opacity: 0; transform: translateY(-35%) scale(1.08); } }
@keyframes lc-blink { 0%,35%,55%,100% { transform: scaleY(1); } 43%,47% { transform: scaleY(.12); } }
@keyframes lc-sway { 0%,100% { transform: rotate(0); } 35% { transform: rotate(-2deg); } 70% { transform: rotate(1.5deg); } }
@media (min-width: 1280px) {
  letter-character { position: fixed; top: auto; bottom: 24px; left: max(8px, calc((100vw - 1172px) / 2 - 112px)); width: 88px; min-height: 0; padding: 0; flex-direction: column; gap: 8px; background: transparent; border: 0; }
  .lc-stage { flex: 0 0 auto; width: 80px; }
  .lc-copy { text-align: center; width: 100%; }
  .lc-caption { font-size: 8px; letter-spacing: 1.5px; }
  .lc-note { font-size: 12px; line-height: 1.8; min-height: 44px; letter-spacing: .5px; }
  .lc-actions { gap: 0; }
  letter-character[data-collapsed="true"] { min-height: 44px; }
}
@media (max-width: 380px) {
  letter-character { gap: 10px; padding-inline: 18px; }
  .lc-note { font-size: 13px; letter-spacing: .5px; }
  .lc-caption { font-size: 8px; letter-spacing: 1px; }
  .lc-heart, .lc-collapse { width: 44px; }
}
@media (prefers-reduced-motion: reduce) {
  letter-character *, letter-character *::before, letter-character *::after { animation: none !important; transition: none !important; }
  letter-character[data-state="heart"] .lc-love { opacity: .85; }
  letter-character[data-state="shy"] .lc-pose { transform: none; }
  letter-character[data-state="welcome"] .lc-arm-right { transform: rotate(-115deg); }
}
@media print { letter-character { display: none; } }