:root{--navy:#1b2a4a;--teal:#4fb3bf;--sand:#f4ede4;--coral:#ff7a6b;--amber:#f2b84b}
*{-webkit-tap-highlight-color:transparent}
body{margin:0;font-family:'DM Sans',sans-serif;color:var(--navy);
background:radial-gradient(120% 60% at 50% 0%,#e3f1f1 0%,var(--sand) 55%) fixed;min-height:100vh}
.serif{font-family:'Fraunces',serif}
.card{background:#fff;border-radius:20px;box-shadow:0 4px 14px rgba(27,42,74,.08)}
.fade{animation:fade .35s ease both}
@keyframes fade{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.press{transition:transform .12s}
.press:active{transform:scale(.93)}
.wave{animation:drift 9s ease-in-out infinite alternate}
@keyframes drift{from{transform:translateX(0)}to{transform:translateX(-40px)}}
.stagger>*{animation:fade .4s ease both}
.stagger>*:nth-child(2){animation-delay:.05s}.stagger>*:nth-child(3){animation-delay:.1s}
.stagger>*:nth-child(4){animation-delay:.15s}.stagger>*:nth-child(5){animation-delay:.2s}
.ring-arc{stroke-dasharray:100;stroke-dashoffset:100;animation:draw 1s ease-out forwards;transition:stroke-width .2s,opacity .2s}
@keyframes draw{to{stroke-dashoffset:0}}
.ring-pulse{animation:pulse 2s ease-out infinite;opacity:.6}
@keyframes pulse{0%{transform:scale(1);opacity:.7}100%{transform:scale(2.4);opacity:0}}
input[type=number],input[type=date]{border:1px solid #d9d2c7;border-radius:12px;padding:10px 12px;background:#fffdf9}