body { margin: 0; font-family: system-ui, sans-serif; color: #1d1830; }
header { padding: 16px; font-weight: 700; background: #f4efe4; }
main { padding: 16px; }
#hero { display: block; max-width: 100%; height: auto; }
button { padding: 12px 20px; font-size: 16px; }
h1 { margin: 0 0 8px; }
#tea, #reviews { display: flow-root; }
#about { font-size: 18px; line-height: 1.5; }
.price { font-weight: 700; }
#reviews ul { margin: 0; padding-left: 20px; line-height: 1.6; }
footer { padding: 24px 16px; background: #f4efe4; }
.reserved #tea { min-height: 260px; }
.reserved #reviews { min-height: 96px; }
.bar { height: 18px; margin: 0 0 14px; border-radius: 4px; background: #e8e2d6; }
.bar.title { width: 50%; height: 28px; margin: 20px 0 22px; }
.bar.short { width: 60%; }
.spinner { display: flex; align-items: center; gap: 12px; color: #5c5670; }
.spinner::before { content: ""; width: 24px; height: 24px; border: 3px solid #e8e2d6; border-top-color: #1d1830; border-radius: 50%; }
@keyframes spin { to { transform: rotate(1turn); } }
@keyframes pulse { to { opacity: 0.5; } }
@media (prefers-reduced-motion: no-preference) {
  .spinner::before { animation: spin 1s linear infinite; }
  .bar { animation: pulse 0.9s ease-in-out infinite alternate; }
}