/* LookAtMe theme + hero art. Layout lives in ../app-page.css. */
:root { --bg: #1a1427; --ink: #f9f2f9; --muted: #c6b8cd; --accent: #f08ca9; --button-bg: #f8d7e6; --button-ink: #281930; --line: rgba(255,255,255,.16); --section-bg: #f7f0f4; --section-ink: #2d2234; --section-muted: #6e6171; --section-accent: #aa537b; --card-bg: #fffafd; --card-line: #e6d8e1; --closing-glow: #3d2851; }
.hero { background: radial-gradient(circle at 75% 42%, rgba(118,66,145,.3), transparent 38%); }
.hero-lead { color: #e1d5e2; }
.story-card { width: min(85%, 385px); padding: 34px; border-radius: 25px; background: #fff8f9; color: #342539; box-shadow: 0 26px 65px rgba(7,3,18,.32); transform: rotate(-4deg); }
.story-card-label { color: #9a668b; font: 700 10px var(--display); letter-spacing: .14em; }
.story-card p { margin: 24px 0; font-size: 21px; font-weight: 600; line-height: 1.5; word-break: keep-all; }
.story-reactions { color: #ad6c92; font-size: 24px; letter-spacing: .3em; }
.reply-card { display: flex; align-items: center; gap: 12px; max-width: 85%; padding: 12px 18px 12px 12px; border-radius: 22px; background: #5f3b74; box-shadow: 0 14px 30px rgba(7,3,18,.25); font-size: 14px; font-weight: 600; word-break: keep-all; }
.reply-one { align-self: flex-end; margin-right: 2%; transform: rotate(3deg); }
.reply-two { align-self: flex-start; margin-left: 7%; background: #bb7fa8; color: #231829; transform: rotate(-2deg); }
.reply-avatar { flex: none; width: 32px; height: 32px; display: grid; place-items: center; border-radius: 50%; background: #a95da3; color: white; font: 700 13px var(--display); }
.reply-avatar-alt { background: #5a3764; }
@media (max-width: 600px) { .story-card { padding: 25px; } .story-card p { font-size: 17px; } .reply-card { font-size: 12px; } }