/* reaction-burst showpiece, dressed in the Decimals kit: sand-cream page with a blush wash, warm brown-black ink,
   a book serif headline, plain Arial for the chat. Only the like is saturated. */
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; overflow: hidden; }
body {
  background: #ede8e1;
  background-image: radial-gradient(ellipse 70% 55% at 50% 60%, rgba(244, 201, 190, .62), rgba(244, 201, 190, 0) 70%);
  color: #4d4638;
  font: 14px/1.45 Arial, Helvetica, sans-serif;
}
.frame { position: absolute; left: 50%; top: 50%; width: 1050px; height: 1200px; transform: translate(-50%, -50%); }

.head { position: absolute; left: 60px; right: 60px; top: 160px; text-align: center; }
.head h1 { margin: 0; font: 400 52px/1.02 "Newsreader", Georgia, serif; letter-spacing: -2.4px; color: #4d4638; }
.head h1 em { font-style: italic; }

/* the chat is drawn once at 420px and set as one picture, 2.15x */
.mock-wrap { position: absolute; left: 50%; top: 326px; width: 420px; transform: translateX(-50%) scale(2.15); transform-origin: 50% 0; }
.win {
  background: #fffdf8; border-radius: 10px;
  box-shadow: 0 0 0 1px #ddd5c9, 0 0 0 5px rgba(255, 253, 248, .7), 0 0 0 6px #e3dbd0, 0 22px 50px -24px rgba(78, 70, 55, .35);
}
.bar { display: flex; align-items: center; gap: 5px; padding: 10px 14px; border-bottom: 1px solid #efe9e0; font-weight: 700; font-size: 13px; }
.bar .hash { color: rgba(77, 70, 56, .45); }
.bar small { margin-left: auto; font-weight: 400; color: rgba(77, 70, 56, .55); font-size: 11.5px; }
.feed { padding: 16px 16px 20px; display: grid; gap: 16px; }
.m { display: flex; gap: 11px; align-items: flex-start; }
.av { flex: none; position: relative; width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; font-size: 10.5px; font-weight: 700; color: #fffdf8; }
.av b { position: absolute; right: -1px; bottom: -1px; width: 9px; height: 9px; border-radius: 50%; background: #6f9a6a; border: 1.5px solid #fffdf8; }
.mc { flex: 1; min-width: 0; display: grid; gap: 5px; }
.meta { display: flex; align-items: baseline; gap: 7px; }
.meta strong { font-weight: 700; font-size: 13px; color: #4d4638; }
.meta time { font-size: 11px; color: rgba(77, 70, 56, .55); }
.note { color: rgba(77, 70, 56, .85); font-size: 13.5px; }
.card { display: inline-flex; align-items: center; gap: 9px; padding: 6px 12px 6px 6px; border: 1px solid #e9e2d7; border-radius: 9px; width: fit-content; background: #fff; }
.card i { width: 28px; height: 28px; border-radius: 6px; background: linear-gradient(135deg, #e4d6c6, #c9b8a6); }
.card span { font-size: 12px; } .card small { display: block; color: rgba(77, 70, 56, .55); font-size: 10.5px; }

.rb { --rb-ink: #4d4638; --rb-chip-bg: #fbf8f3; --rb-chip-line: #e9e2d7; --rb-burst-size: 4.5px; --rb-burst-dur: .75s; }
.rb-bubble { padding: 8px 12px; background: #f6f1ea; border: 1px solid #ebe3d8; border-radius: 0 9px 9px 9px; font-size: 14.5px; line-height: 21px; color: #3e382d; }
.rb-typing i { background: #c4b9aa; }
.rb-reacts { min-height: 24px; }
.rb-react em { color: #4d4638; }
.rb-pick { background: #fffdf8; border-color: #e6ded2; }
.rb-tag { background: #4d4638; font-family: Arial, Helvetica, sans-serif; }

/* the quiet reset between plays */
.cycle { transition: opacity .4s ease; }
.cycle.is-out { opacity: 0; }
@media (prefers-reduced-motion: reduce) { .cycle { transition: none; } }