/* A17 Cooldown: the website, in the app's Matcha look: an oat page, ivory cards with a hairline,
   deep olive ink, sage and matcha greens, clay for heat, a rounded sans and soft squares. */
:root {
  --page: #F3F1E7; --card: #FCFBF6; --raised: #E9E6D8; --edge: rgba(46, 53, 36, .11); --ink: #2E3524; --moss: #3D4A2A;
  --gray: #6B6C58; --dim: #AEAD9A; --matcha: #CBD6B8; --sage: #8FA06F; --straw: #EBDDA8; --clay: #B5623F; --clay-soft: #EBCDBD; --mist: #C9DAD2; --stone: #DAD5C4;
}
* { box-sizing: border-box; }
html { background: var(--page); }
body {
  margin: 0; color: var(--ink); min-height: 100vh;
  background: radial-gradient(120% 420px at 50% 0, var(--glow, #DCE5CC), rgba(243, 241, 231, 0) 70%) no-repeat, var(--page);
  font: 17px/1.5 ui-rounded, "SF Pro Rounded", -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif;
}
main { max-width: 540px; margin: 0 auto; padding: 28px 22px 64px; }
.brand { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; font-size: 19px; letter-spacing: -.01em; color: var(--ink); text-decoration: none; }
.leaf { width: 16px; height: 16px; flex: none; }
h1 { font-size: clamp(32px, 9.5vw, 46px); line-height: 1.05; letter-spacing: -.02em; font-weight: 600; margin: 28px 0 14px; }
h2 { display: flex; align-items: center; gap: 8px; font-size: 19px; font-weight: 600; margin: 30px 0 10px; }
p { margin: 0 0 14px; }
.soft { color: var(--gray); }
.panel { background: var(--tint, var(--matcha)); border-radius: 24px; padding: 20px; margin: 20px 0; }
.panel h3 { margin: 0 0 6px; font-size: 19px; font-weight: 600; }
.panel p { margin: 0; font-size: 16px; line-height: 1.45; }
.card { background: var(--card); border: 1px solid var(--edge); border-radius: 22px; padding: 16px 18px; margin: 10px 0; }
.card h3 { margin: 0 0 2px; font-size: 16px; font-weight: 600; }
.card p { margin: 0; color: var(--gray); font-size: 15px; }
.button { display: block; width: 100%; text-align: center; text-decoration: none; border: 0; cursor: pointer; background: var(--fill, var(--moss)); color: var(--on, var(--page)); font: 600 16px/1 inherit; font-family: inherit; padding: 17px 20px; border-radius: 16px; margin: 16px 0 8px; transition: transform .12s; }
.button:active { transform: scale(.98); }
.quiet { display: inline-block; background: var(--card); color: var(--ink); border: 1px solid var(--edge); border-radius: 12px; font: 600 14px/1 inherit; font-family: inherit; padding: 11px 15px; text-decoration: none; cursor: pointer; }
.field { width: 100%; background: var(--raised); color: var(--ink); border: 0; border-radius: 16px; font: 600 20px ui-monospace, Menlo, monospace; letter-spacing: .14em; padding: 15px 18px; text-transform: uppercase; }
.field::placeholder { color: var(--dim); }
.faces { display: flex; margin: 6px 0 8px; }
.face { width: 52px; height: 52px; margin-right: -8px; border-radius: 16px; border: 3px solid var(--page); display: grid; place-items: center; font-weight: 600; font-size: 20px; color: var(--ink); }
.code { font: 600 28px/1 ui-monospace, Menlo, monospace; letter-spacing: .14em; display: inline-block; background: var(--matcha); border-radius: 10px; padding: 10px 14px; margin: 2px 0 10px; }
.rise { animation: rise .6s cubic-bezier(.2, .8, .2, 1) both; }
.rise:nth-child(2) { animation-delay: .05s; } .rise:nth-child(3) { animation-delay: .1s; } .rise:nth-child(4) { animation-delay: .15s; } .rise:nth-child(5) { animation-delay: .2s; } .rise:nth-child(6) { animation-delay: .25s; }
@keyframes rise { from { opacity: 0; transform: translateY(14px); } }
footer { margin-top: 44px; font-size: 13px; color: var(--dim); }
footer a { color: var(--gray); }
@media (prefers-reduced-motion: reduce) { * { animation: none !important; } }