/* Layout: a Santa's-letter world. Hessian table, a white letter with a candy-stripe border as the app sheet,
   kraft "North Pole Air Mail" envelope for sharing, green "Checked twice" seals for confirmations.
   Single deliberate look (paper and hessian), same in light and dark. */
:root{
  color-scheme:light;
  --hessian:#B8956A; --kraft:#C9A271; --kraft-deep:#B88F5E; --stamp:#8E3326; --stamp-soft:rgba(142,51,38,.12);
  --paper:#FFFFFF; --cream:#FFFBF4; --ink:#2C241F; --muted:#6F625A; --line:#E9DED0;
  --berry:#C42B37; --berry-soft:#FBE7E8; --holly:#3F7D3A; --holly-soft:#E7F1E3; --seal:#4F7A47; --gold:#A97B22; --gold-soft:#FBF2DF;
  --ok:#3F7D3A; --warn:#8A5A0B;
  --stripe:repeating-linear-gradient(45deg,#D0343F 0 6px,#fff 6px 9px,#5E9B48 9px 15px,#fff 15px 18px);
  --script:"Great Vibes", "Snell Roundhand", "Brush Script MT", cursive;
  --hand:"Caveat", "Bradley Hand", "Segoe Print", cursive;
  --slab:"Alfa Slab One", Rockwell, Georgia, serif;
  --body:"Figtree", system-ui, -apple-system, "Segoe UI", sans-serif;
  --r:10px;
}
*{box-sizing:border-box}
[hidden]{display:none!important}
body{color:var(--ink);font-family:var(--body);font-size:15px;line-height:1.5;min-height:100vh;
  background:
    repeating-linear-gradient(0deg, rgba(60,40,20,.10) 0 1px, transparent 1px 4px),
    repeating-linear-gradient(90deg, rgba(255,240,210,.10) 0 1px, transparent 1px 4px),
    repeating-linear-gradient(90deg, rgba(60,40,20,.06) 0 2px, transparent 2px 7px),
    var(--hessian);}
.wrap{position:relative;max-width:1060px;margin:0 auto;padding-inline:16px;padding-block:0 60px}
h1,h2,h3{text-wrap:balance;margin:0;line-height:1.1;font-weight:400}
h2{font-family:var(--script);font-size:2.6rem;color:var(--berry)}
h3{font-family:var(--body);font-size:1.1rem;font-weight:700}
p{margin:0}
.muted{color:var(--muted)}
.small{font-size:.85rem}
.label{font-size:.72rem;letter-spacing:.09em;text-transform:uppercase;font-weight:700;color:var(--muted)}
.hand{font-family:var(--hand);font-size:1.25rem;line-height:1.2}
button,input,textarea,select{font:inherit;color:inherit}
:focus-visible{outline:2px solid var(--holly);outline-offset:2px}

/* berry and pine garland across the top */
.garland{height:96px;margin-inline:-16px;display:block;width:calc(100% + 32px)}
.top{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px;margin-top:-28px;margin-bottom:14px;position:relative}
.seg{display:flex;background:var(--kraft);border-radius:999px;padding:4px;gap:2px;box-shadow:0 2px 6px rgba(60,40,20,.25)}
.seg button{border:0;background:none;padding:7px 16px;border-radius:999px;cursor:pointer;font-weight:700;color:var(--stamp)}
.seg button[aria-pressed="true"]{background:var(--berry);color:#fff}
.sleeps{font-family:var(--slab);color:var(--stamp);background:var(--kraft);padding:6px 14px;border-radius:6px;font-size:.9rem;letter-spacing:.03em;border:2px dashed rgba(142,51,38,.45);box-shadow:0 2px 6px rgba(60,40,20,.25)}

/* the letter */
.paper{background:var(--paper);padding:12px;box-shadow:0 18px 40px rgba(50,30,10,.35);transform:rotate(-.25deg)}
.letter{border:8px solid transparent;border-image:var(--stripe) 8;padding:26px 28px 32px;position:relative;transform:rotate(.25deg)}
.letter::after{content:"";position:absolute;inset:4px;border:1px solid var(--holly);pointer-events:none;opacity:.35}
@media (max-width:560px){.paper{padding:6px}.letter{padding:22px 14px 24px}}
.corner{position:absolute;top:-4px;width:74px;height:58px;z-index:1;pointer-events:none}
.corner.l{left:-4px}.corner.r{right:-4px;transform:scaleX(-1)}
.letterhead{text-align:center;display:flex;flex-direction:column;align-items:center;gap:0;margin-bottom:12px}
.letterhead .from{font-family:var(--hand);font-size:1.5rem;color:var(--ink)}
.letterhead h1{font-family:var(--script);font-size:clamp(3.2rem,9vw,5rem);color:var(--berry);line-height:1}
.letterhead .flourish{width:220px;max-width:70%;height:26px}
.letterhead .tag{font-family:var(--hand);font-size:1.3rem;color:var(--muted)}
.proto{background:var(--gold-soft);color:var(--ink);border-radius:var(--r);padding:10px 14px;font-size:.88rem;margin-block:10px 24px;border:1px dashed var(--gold)}
.proto b{color:var(--gold)}
.holly{width:34px;height:24px;vertical-align:4px;margin-left:8px}

/* forms */
.field{display:flex;flex-direction:column;gap:5px}
.field label{font-weight:600;font-size:.88rem}
input,textarea,select{background:var(--cream);border:1px solid var(--line);border-radius:8px;padding:10px 12px;width:100%}
input:disabled{opacity:.6}
textarea{resize:vertical;min-height:96px;font-size:.9rem}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:12px}
@media (max-width:560px){.grid2{grid-template-columns:1fr}}
.btn{border:0;border-radius:8px;padding:11px 18px;font-weight:700;cursor:pointer;background:var(--holly);color:#fff;display:inline-flex;align-items:center;gap:8px;justify-content:center}
.btn.berry{background:var(--berry)}
.btn.ghost{background:transparent;color:var(--ink);border:1px solid var(--line)}
.btn.sm{padding:7px 12px;font-size:.85rem}
.btn:disabled{opacity:.5;cursor:not-allowed}
.err{color:var(--berry);font-size:.88rem}
.panel{background:var(--cream);border:1px solid var(--line);border-radius:var(--r);padding:20px;display:flex;flex-direction:column;gap:14px}

/* wisher layout */
.cols{display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:26px;align-items:start}
@media (max-width:840px){.cols{grid-template-columns:1fr}}
.stack{display:flex;flex-direction:column;gap:18px;min-width:0}
.head{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:end;gap:10px}

/* product grid: little gift tags */
.items{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:16px}
.item{background:var(--paper);border:1px solid var(--line);border-radius:var(--r);overflow:hidden;display:flex;flex-direction:column;position:relative;box-shadow:0 2px 0 var(--line)}
.item .pic{aspect-ratio:1/1;max-width:100%;display:grid;place-items:center}
.item .pic svg{width:100%;height:100%;display:block}
.item .body{padding:12px 14px 14px;display:flex;flex-direction:column;gap:4px;flex:1;border-top:4px solid transparent;border-image:var(--stripe) 4}
.item .brandname{font-size:.72rem;letter-spacing:.08em;text-transform:uppercase;font-weight:700;color:var(--muted)}
.item .name{font-weight:600;line-height:1.3}
.item .price{color:var(--berry);font-weight:800;font-size:1.3rem;margin-top:auto;padding-top:8px;font-variant-numeric:tabular-nums}
.item .incl{font-size:.75rem;color:var(--muted)}
.item .actions{display:flex;gap:8px;margin-top:8px}
.item.clickable{cursor:pointer;transition:transform .15s,box-shadow .15s}
.item.clickable:hover,.item.clickable:focus-visible{transform:translateY(-3px) rotate(-.6deg);box-shadow:0 10px 22px rgba(80,40,20,.18)}
.item .bow{position:absolute;top:-2px;right:12px;width:34px;height:40px;opacity:0;transition:opacity .2s;z-index:2}
.item.clickable:hover .bow,.item.clickable:focus-visible .bow{opacity:1}
.tagpill{position:absolute;top:10px;left:10px;font-size:.72rem;font-weight:700;padding:3px 9px;border-radius:999px;z-index:1}
.tagpill.claimed{background:var(--berry);color:#fff}
.tagpill.src{background:var(--paper);color:var(--muted);border:1px solid var(--line)}
.item.isclaimed .pic,.item.isclaimed .body{opacity:.5}
.empty{border:1.5px dashed var(--line);border-radius:var(--r);padding:28px;text-align:center;color:var(--muted);font-family:var(--hand);font-size:1.35rem}

/* share: kraft air-mail envelope */
.gifttag{background:var(--kraft);border-radius:6px;padding:18px;display:flex;flex-direction:column;align-items:center;gap:12px;text-align:center;position:relative;color:var(--stamp);
  background-image:repeating-linear-gradient(0deg,rgba(90,60,30,.05) 0 1px,transparent 1px 3px);box-shadow:0 8px 20px rgba(60,40,20,.25);transform:rotate(1deg)}
.gifttag .addrfrom{align-self:flex-start;text-align:left;font-family:var(--hand);font-size:1.15rem;line-height:1.1}
.stamp{border:3px double var(--stamp);border-radius:8px;padding:6px 14px;font-family:var(--slab);line-height:1.05;transform:rotate(-3deg);background:var(--stamp-soft)}
.stamp .s1{font-size:.8rem;letter-spacing:.08em}.stamp .s2{font-size:1.5rem;letter-spacing:.03em}.stamp .s3{font-size:.8rem;letter-spacing:.12em}
.postmark{position:absolute;top:12px;right:12px;width:62px;height:62px;opacity:.75}
.special{font-family:var(--hand);font-size:1.4rem;border-bottom:1.5px solid var(--stamp);padding-bottom:2px}
.qr{background:#fff;padding:10px;border-radius:6px}
.qr img,.qr canvas{display:block;width:170px;height:170px}
.link{font-family:ui-monospace,Menlo,monospace;font-size:.8rem;background:rgba(255,255,255,.55);color:var(--ink);padding:6px 10px;border-radius:6px;word-break:break-all}
.gifttag .btn.ghost{border-color:rgba(142,51,38,.35);color:var(--stamp)}
.row{display:flex;flex-wrap:wrap;gap:8px;justify-content:center}
.addr{font-family:var(--hand);font-size:1.3rem;line-height:1.15;white-space:pre-line;color:var(--stamp)}

/* gifter */
.finder{display:flex;gap:10px;flex-wrap:wrap}
.finder input{flex:1;min-width:0}
.hero{display:flex;flex-wrap:wrap;gap:16px;align-items:center;justify-content:space-between;padding-bottom:10px;border-bottom:1px dashed var(--line)}
.avatar{width:54px;height:54px;border-radius:50%;background:var(--berry);color:#fff;display:grid;place-items:center;font-family:var(--script);font-size:2rem;flex:none;box-shadow:0 0 0 3px var(--paper),0 0 0 5px var(--holly)}
.dear{font-family:var(--hand);font-size:1.35rem;color:var(--muted)}

/* budget helper */
.budget{display:flex;flex-direction:column;gap:12px;background:var(--gold-soft);border:1.5px dashed var(--gold);border-radius:var(--r);padding:16px 18px}
.budget .title{font-family:var(--hand);font-size:1.6rem;line-height:1;color:var(--stamp)}
.budget .controls{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.money{position:relative;width:120px;flex:none}
.money span{position:absolute;left:12px;top:50%;transform:translateY(-50%);font-weight:700}
.money input{padding-left:26px;background:var(--paper);font-weight:700}
.chipbtn{border:1px solid var(--gold);background:var(--paper);border-radius:999px;padding:6px 13px;font-weight:700;cursor:pointer;color:var(--ink)}
.chipbtn[aria-pressed="true"]{background:var(--berry);border-color:var(--berry);color:#fff}
.chipbtn.clear{border-style:dashed;color:var(--muted)}
.bsum{font-size:.95rem}
.bsum b{color:var(--holly)}
.combo{display:flex;flex-direction:column;gap:6px;background:var(--paper);border-radius:8px;padding:12px 14px;border:1px solid var(--line)}
.combo ul{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:4px}
.combo li{display:flex;justify-content:space-between;gap:10px;font-variant-numeric:tabular-nums}
.combo li button{border:0;background:none;padding:0;color:var(--berry);font-weight:600;text-align:left;cursor:pointer;text-decoration:underline;text-underline-offset:2px}
.combo .tot{border-top:1px dashed var(--line);padding-top:6px;font-weight:700}
.item.over .pic,.item.over .body{opacity:.4}
.item .bpill{display:none}
.budgeton .item .bpill{display:inline-block}
.tagpill.fits{background:var(--holly);color:#fff}
.tagpill.overpill{background:var(--paper);color:var(--muted);border:1px solid var(--line)}

/* deadlines, group gifting, groups, footer */
.deadline{background:var(--berry-soft);color:var(--ink);border-radius:8px;padding:9px 14px;font-size:.92rem;border-left:4px solid var(--berry)}
.deadline b{color:var(--berry)}
.deadline.late{background:var(--gold-soft);border-left-color:var(--gold)}
.pot{display:flex;flex-direction:column;gap:4px;margin-top:8px}
.bar{height:7px;border-radius:99px;background:var(--line);overflow:hidden}
.bar span{display:block;height:100%;background:var(--holly);border-radius:99px}
.item.chipover .pic{opacity:.75}
.tagpill.chippill{background:var(--gold);color:#fff}
.fs{border:0;padding:0;margin:0;display:flex;flex-direction:column;gap:8px}
.fs legend{margin-bottom:8px}
.check{display:flex;gap:10px;align-items:flex-start;font-size:.9rem}
.check input{width:18px;height:18px;margin-top:2px;flex:none}
a{color:var(--berry)}
.privacy{color:var(--stamp);max-width:30ch}
.coming{gap:8px}
.bignum{font-family:var(--script);font-size:3.2rem;line-height:1;color:var(--berry)}
.members{list-style:none;margin:0;padding:0;display:flex;flex-direction:column}
.members li{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:9px 0;border-bottom:1px dashed var(--line)}
.members li>div{display:flex;flex-direction:column}
.grid3{display:grid;grid-template-columns:1fr 1fr auto;gap:10px}
@media (max-width:560px){.grid3{grid-template-columns:1fr}}
.ruleadd{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.ruleadd select{width:auto;flex:1;min-width:120px}
.reveal{background:var(--paper);color:var(--ink);border-radius:8px;padding:14px;display:flex;flex-direction:column;align-items:center;gap:4px;border:6px solid transparent;border-image:var(--stripe) 6}
.reveal .who{font-family:var(--script);font-size:2.6rem;color:var(--berry);line-height:1.1}
.hold{background:var(--gold-soft);border-radius:8px;padding:8px 12px;font-size:.88rem}
.spinner{width:44px;height:44px;border-radius:50%;border:5px solid var(--line);border-top-color:var(--berry);animation:spin 1s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.sum.mini .pic{width:48px;height:48px}
.policy{display:flex;flex-direction:column;gap:10px}
.neg{color:var(--berry);font-weight:700}
.foot{margin-top:34px;padding-top:16px;border-top:1px dashed var(--line);display:flex;flex-direction:column;gap:6px;align-items:center;text-align:center}
.foot nav{gap:18px}
.overlay.top2{z-index:30}
@media (max-width:520px){.seg button{padding:7px 10px;font-size:.88rem}}
.seg{flex-wrap:wrap;justify-content:center}

/* order details */
.od{display:grid;grid-template-columns:120px minmax(0,1fr);gap:8px 14px;margin:0;font-size:.92rem}
.od dt{font-weight:700;color:var(--muted);font-size:.78rem;text-transform:uppercase;letter-spacing:.06em;padding-top:2px}
.od dd{margin:0;min-width:0}
@media (max-width:480px){.od{grid-template-columns:1fr}.od dd{margin-bottom:6px}}
.brk{word-break:break-all}
.mailhead{background:var(--cream);border:1px solid var(--line);border-radius:8px;padding:8px 12px;display:flex;flex-direction:column;gap:2px}
.linkbtn{border:0;background:none;padding:0;color:var(--berry);text-decoration:underline;cursor:pointer;font:inherit}
.ownmail{padding:14px 16px;gap:8px}
a.btn{text-decoration:none}

/* notifications */
.bell{position:relative;padding:7px 10px}
.badge{position:absolute;top:-6px;right:-6px;background:var(--berry);color:#fff;border-radius:999px;font-size:.7rem;font-weight:800;min-width:18px;height:18px;display:grid;place-items:center;padding:0 5px}
.alert{display:flex;gap:16px;align-items:center;background:var(--holly-soft);border:1.5px solid var(--holly);border-radius:var(--r);padding:14px 16px}
.alert .seal{width:78px;height:78px;flex:none;transform:rotate(-8deg)}
.alert .atitle{font-weight:800;font-size:1.1rem}
.notes{list-style:none;margin:0;padding:0;display:flex;flex-direction:column}
.notes li>span{white-space:nowrap}
.notes li{display:flex;justify-content:space-between;gap:12px;padding:10px 0;border-bottom:1px dashed var(--line)}
.notes li.new b::before{content:"";display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--berry);margin-right:6px;vertical-align:1px}
@media (max-width:480px){.alert{flex-direction:column;align-items:flex-start}}

/* checkout overlay: another letter */
.overlay{position:fixed;inset:0;background:rgba(40,25,10,.6);display:flex;align-items:flex-start;justify-content:center;padding:24px 16px;overflow:auto;z-index:20}
.sheet{background:var(--paper);max-width:560px;width:100%;padding:24px;display:flex;flex-direction:column;gap:16px;border:8px solid transparent;border-image:var(--stripe) 8;box-shadow:0 20px 40px rgba(0,0,0,.35)}
.sheet h2{font-size:2.3rem}
.sum{display:flex;gap:14px;align-items:center}
.sum .pic{width:76px;height:76px;border-radius:8px;flex:none;display:grid;place-items:center}
.sum .pic{overflow:hidden}.sum .pic svg{width:100%;height:100%;display:block}
.lines{display:flex;flex-direction:column;gap:6px;font-variant-numeric:tabular-nums}
.lines div{display:flex;justify-content:space-between;gap:12px}
.lines .total{border-top:1px dashed var(--line);padding-top:8px;font-weight:700;font-size:1.05rem}
.choice{display:grid;grid-template-columns:1fr 1fr;gap:10px}
@media (max-width:480px){.choice{grid-template-columns:1fr}}
.choice label{border:1.5px solid var(--line);border-radius:8px;padding:12px;cursor:pointer;display:flex;flex-direction:column;gap:3px;background:var(--cream);position:relative}
.choice input{position:absolute;opacity:0;width:1px;height:1px}
.choice label:has(input:checked){border-color:var(--holly);background:var(--holly-soft)}
.choice label:has(input:focus-visible){outline:2px solid var(--holly)}
.note{font-size:.84rem;color:var(--ink);background:var(--holly-soft);padding:8px 12px;border-radius:8px}
.done{text-align:center;display:flex;flex-direction:column;gap:10px;align-items:center;padding:6px 0}
.done .seal{width:120px;height:120px;transform:rotate(-8deg)}
.checks{display:flex;gap:28px;justify-content:center;font-family:var(--hand);font-size:1.2rem}
.checks span{display:flex;flex-direction:column;align-items:center;gap:2px}
.checks svg{width:34px;height:34px}

/* owner */
.kpis{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
@media (max-width:720px){.kpis{grid-template-columns:repeat(2,minmax(0,1fr))}}
.kpi{background:var(--cream);border:1px solid var(--line);border-radius:var(--r);padding:14px}
.kpi b{display:block;font-size:1.5rem;font-variant-numeric:tabular-nums;color:var(--ink)}
.tablewrap{overflow-x:auto;background:var(--paper);border:1px solid var(--line);border-radius:var(--r)}
table{border-collapse:collapse;width:100%;min-width:760px;font-size:.88rem}
th,td{padding:10px 12px;text-align:left;border-bottom:1px solid var(--line);vertical-align:top}
th{font-size:.72rem;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);font-weight:700;background:var(--cream)}
td.num,th.num{text-align:right;font-variant-numeric:tabular-nums}
.chip{display:inline-block;font-size:.72rem;font-weight:700;padding:2px 8px;border-radius:999px}
.chip.found{background:var(--holly-soft);color:var(--ok)}
.chip.wait{background:var(--gold-soft);color:var(--warn)}
.chip.none{background:var(--berry-soft);color:var(--berry)}
.pos{color:var(--ok);font-weight:700}
.toast{position:fixed;left:50%;bottom:calc(20px + env(safe-area-inset-bottom,0px));transform:translateX(-50%);background:var(--stamp);color:#fff;padding:10px 16px;border-radius:8px;font-weight:600;z-index:40;font-size:.9rem}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}

/* ---------- site chrome (server-rendered pages) ---------- */
.nav{display:flex;flex-wrap:wrap;gap:6px;background:var(--kraft);border-radius:999px;padding:4px;box-shadow:0 2px 6px rgba(60,40,20,.25)}
.nav a,.nav button{border:0;background:none;padding:7px 14px;border-radius:999px;font-weight:700;color:var(--stamp);text-decoration:none;cursor:pointer;font-size:.92rem}
.nav a[aria-current="page"]{background:var(--berry);color:#fff}
.nav form{display:inline}
.flash{border-radius:8px;padding:10px 14px;margin-bottom:16px;font-size:.92rem}
.flash.ok{background:var(--holly-soft);border:1px solid var(--holly)}
.flash.err{background:var(--berry-soft);border:1px solid var(--berry)}
.letterhead a{text-decoration:none}
.card-link{text-decoration:none;color:inherit}
.pic img{width:100%;height:100%;display:block;object-fit:cover}
.sum .pic img{width:100%;height:100%}
.realphoto{width:76px;height:76px;object-fit:contain;border:1px solid var(--line);border-radius:8px;background:#fff}
.steps{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}
@media (max-width:760px){.steps{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:420px){.steps{grid-template-columns:1fr}}
.step{background:var(--cream);border:1px solid var(--line);border-radius:var(--r);padding:16px;display:flex;flex-direction:column;gap:6px}
.step b{font-family:var(--script);font-size:1.8rem;color:var(--berry);line-height:1}
.homehero{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);gap:24px;align-items:center}
@media (max-width:760px){.homehero{grid-template-columns:1fr}}
.homehero .lead{font-size:1.1rem}
.manual{background:var(--gold-soft);border:1.5px dashed var(--gold);border-radius:var(--r);padding:14px 16px;display:flex;flex-direction:column;gap:10px}
.inline{display:inline}
.chk{display:flex;gap:8px;align-items:center}
.chk input{width:18px;height:18px}
table .actions{display:flex;gap:6px;flex-wrap:wrap}

/* ---------- animated elf guide ---------- */
.ei-wrap{position:fixed;right:max(16px,env(safe-area-inset-right,0px));bottom:calc(16px + env(safe-area-inset-bottom,0px));z-index:50;display:flex;align-items:flex-end;gap:6px;max-width:calc(100vw - 32px);animation:ei-in .7s cubic-bezier(.2,1.3,.4,1) both}
.ei-wrap.ei-out{animation:ei-outk .45s ease-in both}
@keyframes ei-in{from{transform:translateY(140%)}to{transform:none}}
@keyframes ei-outk{to{transform:translateY(140%);opacity:0}}
.ei-stage{width:170px;flex:none}
.ei-elf{width:170px;height:184px;display:block;overflow:visible}
.ei-body{animation:ei-bob 2.2s ease-in-out infinite;transform-origin:56px 126px}
@keyframes ei-bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-4px)}}
.ei-wave{transform-origin:70px 92px;animation:ei-wave 1.1s ease-in-out infinite}
@keyframes ei-wave{0%,100%{transform:rotate(0)}50%{transform:rotate(-22deg)}}
.ei-eyes{transform-origin:56px 65px;animation:ei-blink 4s infinite}
@keyframes ei-blink{0%,92%,100%{transform:scaleY(1)}95%{transform:scaleY(.1)}}
.ei-hat{transform-origin:56px 50px;animation:ei-hat 2.2s ease-in-out infinite}
@keyframes ei-hat{0%,100%{transform:rotate(0)}50%{transform:rotate(4deg)}}
.ei-prop{animation:ei-prop .5s cubic-bezier(.2,1.4,.4,1) both;transform-origin:96px 86px}
@keyframes ei-prop{from{transform:scale(0) rotate(-20deg)}to{transform:none}}
.ei-bubble{background:#fff;color:#2C241F;border-radius:16px;padding:16px 18px 14px;width:290px;max-width:calc(100vw - 32px - 176px);box-shadow:0 14px 34px rgba(40,25,10,.35);position:relative;border:6px solid transparent;border-image:var(--stripe) 6;margin-bottom:70px}
.ei-bubble::after{content:"";position:absolute;right:-14px;bottom:26px;border:8px solid transparent;border-left-color:#fff}
.ei-bubble.pop{animation:ei-pop .35s ease-out}
@keyframes ei-pop{from{transform:scale(.92);opacity:.4}to{transform:none;opacity:1}}
.ei-step{font-size:.72rem;letter-spacing:.08em;text-transform:uppercase;font-weight:700;color:#6F625A}
.ei-title{font-family:var(--script);font-size:2rem;color:#C42B37;line-height:1.05;margin:2px 0 4px}
.ei-text{font-size:.95rem;line-height:1.45}
.ei-dots{display:flex;gap:6px;margin:10px 0 8px}
.ei-dots span{width:8px;height:8px;border-radius:50%;background:#E9DED0}
.ei-dots span.on{background:#C42B37}
.ei-btns{display:flex;gap:8px;justify-content:flex-end;align-items:center}
.ei-btns button{border:0;border-radius:8px;padding:8px 14px;font-weight:700;cursor:pointer;font:inherit;font-weight:700}
.ei-next{background:#3F7D3A;color:#fff}
.ei-back{background:#fff;border:1px solid #E9DED0!important;color:#2C241F}
.ei-skip{background:none;color:#6F625A;margin-right:auto;text-decoration:underline}
@media (max-width:520px){
  .ei-wrap{flex-direction:column-reverse;align-items:flex-end}
  .ei-bubble{max-width:calc(100vw - 32px);width:100%;margin-bottom:0}
  .ei-bubble::after{right:44px;bottom:-14px;border-left-color:transparent;border-top-color:#fff}
  .ei-stage,.ei-elf{width:96px;height:104px}
}
@media (prefers-reduced-motion:reduce){.ei-wrap,.ei-body,.ei-wave,.ei-eyes,.ei-hat,.ei-prop,.ei-bubble.pop{animation:none!important}}

/* account tabs */
.acct-head{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:flex-end;gap:12px;margin-bottom:20px;padding-bottom:12px;border-bottom:1px dashed var(--line)}
.tabs{display:flex;flex-wrap:wrap;gap:4px}
.tabs a{padding:7px 12px;border-radius:8px;text-decoration:none;color:var(--ink);font-weight:600;font-size:.92rem;border:1px solid transparent}
.tabs a:hover{background:var(--cream)}
.tabs a[aria-current="page"]{background:var(--berry);color:#fff}
.badge-inline{display:inline-grid;place-items:center;min-width:18px;height:18px;padding:0 5px;border-radius:999px;background:var(--berry);color:#fff;font-size:.7rem;font-weight:800;vertical-align:1px}
.tabs a[aria-current="page"] .badge-inline{background:#fff;color:var(--berry)}