:root { --ink:#42342e; --muted:#846f65; --cream:#fff9f2; --orange:#d46f51; --pink:#e8a083; --peach:#f7d6b8; --sage:#bac7aa; }
* { box-sizing:border-box; }
html,body { height:100%; }
body { margin:0; color:var(--ink); min-height:100dvh; overflow:hidden; font-family:"DM Sans",sans-serif; background:radial-gradient(circle at 8% 24%,#f8ddc8 0,transparent 27rem),radial-gradient(circle at 94% 78%,#c9d9c4 0,transparent 30rem),var(--cream); display:flex; flex-direction:column; }
main { width:min(1120px,calc(100% - 40px)); flex:1; min-height:0; margin:auto; padding:20px 0 10px; display:flex; flex-direction:column; justify-content:center; }
.topbar { display:flex; justify-content:center; align-items:center; }.brand { color:var(--ink); text-decoration:none; font-size:1.12rem; font-weight:700; letter-spacing:-.04em; }.brand span { color:var(--orange); margin-right:4px; }
.hero { text-align:center; padding:26px 10px 20px; opacity:.83; }.eyebrow,.section-label,.card-category { text-transform:uppercase; font-size:.68rem; letter-spacing:.13em; font-weight:700; color:var(--orange); }.eyebrow i { display:inline-block;width:18px;height:1px;vertical-align:middle;margin:0 8px;background:var(--orange); }.hero h1 { font-family:"DM Serif Display",serif; font-weight:400; font-size:clamp(2.15rem,4.4vw,3.8rem); line-height:1; letter-spacing:-.05em; margin:12px 0; }.hero em { color:var(--orange); }.hero p { color:var(--muted); max-width:390px; font-size:.9rem; line-height:1.5; margin:auto; }
.affirmation-wrap { position:relative; z-index:1; max-width:750px; margin:0 auto; padding:14px 86px; }.affirmation-card { --card-padding:48px; min-height:350px; overflow:visible; position:relative; border-radius:34px; padding:var(--card-padding); display:flex; flex-direction:column; justify-content:center; color:#fffaf6; background:linear-gradient(135deg,#cf684d 0%,#e98e6f 53%,#efb18a 100%); box-shadow:0 25px 55px rgba(150,77,48,.27),0 0 0 10px rgba(255,224,188,.4),0 0 70px 12px rgba(233,143,103,.28); transition:opacity .18s,transform .18s; }.affirmation-card::after { content:""; pointer-events:none; position:absolute; z-index:0; width:310px;height:310px;border-radius:50%;background:#ffd9ad44;right:-100px;top:-125px; }.sun { position:absolute; z-index:2; right:var(--card-padding); top:var(--card-padding); font-size:1.3rem; color:#fff2dc; }.affirmation-card blockquote { font: 300 clamp(1.76rem, 3.45vw, 2.74rem)/1.02 "DM Serif Display",serif; letter-spacing:-.045em; margin:0; max-width:560px; position:relative; z-index:1; text-shadow:0 2px 16px rgba(109,46,25,.16); }.for-today { position:absolute; z-index:1; right:var(--card-padding); bottom:var(--card-padding); color:#ffe8d5; font-size:.68rem; font-weight:400; letter-spacing:.045em; opacity:.76; margin-bottom: -30px; }
.rating { position:absolute; z-index:3; top:50%; transform:translateY(-50%); opacity:.72; }.rating-left { left:-60px; }.rating-right { right:-60px; }.vote { border:1px solid rgba(255,250,247,.78); width:80px; min-height:72px; display:grid; place-content:center; gap:4px; cursor:pointer; border-radius:20px; font-family:"DM Sans"; box-shadow:0 8px 16px rgba(91,55,38,.1); transition:.2s; }.vote span { font-size:1.2rem; }.vote small { font-size:.6rem; font-weight:700; }.vote.down { color:#9f4f54;background:rgba(248,217,216,.72); }.vote.up { color:#4f856c;background:rgba(216,236,220,.72); }.vote:hover { opacity:1; transform:translateY(-4px) scale(1.03); box-shadow:0 12px 20px rgba(91,55,38,.2); }.vote:disabled { cursor:wait; opacity:.55; }
footer { margin-top: 70px; text-align:center; color:#9d887c; padding:4px 20px 14px; font-size:.72rem; } footer span { color:var(--orange); }
@media (max-width:650px) { body{overflow:hidden} main{width:min(100% - 28px,1120px);padding:10px 0 0;justify-content:center}.topbar{display:none}.hero{padding:0 0 16px}.hero p{display:none}.hero h1{font-size:2.2rem;margin:8px 0}.eyebrow{font-size:.58rem}.affirmation-wrap{padding:10px 18px 40px}.affirmation-card{--card-padding:28px;min-height:270px;padding:var(--card-padding)}.affirmation-card blockquote{font-size:clamp(2rem,9vw,2.55rem)}.for-today{font-size:.62rem}.rating{top:auto;bottom:-31px;transform:none}.rating-left{left:-6px}.rating-right{right:-6px}.vote{width:76px;min-height:55px;display:flex;align-items:center;justify-content:center}.vote small{font-size:.55rem}footer{display:none} }
@media (max-height:720px) and (min-width:651px) { .hero{padding:10px 0}.hero p{display:none}.category-section{margin-bottom:8px}.affirmation-card{min-height:300px;padding:36px 48px}.affirmation-wrap{padding-top:6px}footer{padding-bottom:6px} }