/* Bottom tab bar (Home, Split, Groups, You) and the feed pieces shared by Home, Split and Groups.
   Loaded after look.css and before theme.css. Colors come from app.css tokens, so dark mode keeps working. */
:root{--tabh:calc(64px + env(safe-area-inset-bottom,0px))}
body.hastabs .wrap{padding-bottom:calc(var(--tabh) + 40px)}
.tabbar{position:fixed;left:0;right:0;bottom:0;z-index:30;background:var(--card);border-top:1px solid var(--line);padding:7px 6px calc(8px + env(safe-area-inset-bottom,0px))}
.tabbar>div{max-width:560px;margin:0 auto;display:grid;grid-template-columns:repeat(5,1fr)}
.tabbar a{display:flex;flex-direction:column;align-items:center;gap:4px;font:700 10.5px/1 var(--sans);color:var(--muted);text-decoration:none;padding:4px 0;position:relative;-webkit-tap-highlight-color:transparent}
.tabbar a svg{width:23px;height:23px}
.tabbar a[aria-current="page"]{color:var(--ink)}
.tabbar a[aria-current="page"]::before{content:"";position:absolute;top:-8px;width:22px;height:3px;border-radius:0 0 3px 3px;background:var(--ink)}
.tabbar .me{width:24px;height:24px;border-radius:8px;display:grid;place-items:center;font:700 10px/1 var(--sans);background:var(--bananasoft);color:var(--ink)}
.tabbar a[aria-current="page"] .me{box-shadow:0 0 0 2px var(--card),0 0 0 3.5px var(--ink)}
.tabbar a.peel{margin-top:-24px;gap:10px}
.tabbar a.peel::before{display:none}
.tabbar a.peel span:last-child{color:var(--ink)}
.tabbar .tile{width:56px;height:56px;border-radius:18px;background:var(--banana);display:grid;place-items:center;box-shadow:0 0 0 5px var(--bg),0 0 0 6px var(--line);transition:transform .35s cubic-bezier(.3,1.6,.5,1)}
.tabbar .tile img{width:30px;height:40px;transition:transform .35s cubic-bezier(.3,1.6,.5,1)}
.tabbar a.peel:active .tile,.tabbar a.peel.go .tile{transform:rotate(-12deg) scale(1.06)}
.tabbar a.peel:active .tile img,.tabbar a.peel.go .tile img{transform:rotate(14deg) translateY(-2px)}
.tabbar a.peel[aria-current="page"] .tile{box-shadow:0 0 0 5px var(--bg),0 0 0 6.5px var(--ink)}
/* bars that already sit at the bottom ride on top of the tab bar */
body.hastabs .dock{bottom:var(--tabh)}
body.hastabs .dockcard{padding-bottom:34px}
body.hastabs:has(.dock) .wrap{padding-bottom:calc(var(--tabh) + 210px)}
body.hastabs .toast{bottom:calc(var(--tabh) + 16px)}
body.tab-you .dock{display:none}

/* feed header */
.fhd{display:flex;align-items:center;gap:8px}
.fhd .lg{width:34px;height:44px;flex-shrink:0;transform-origin:50% 90%;animation:wink 3.5s ease-in-out 1s 1}
.fhd .wm{font:700 22px/1 var(--sans);letter-spacing:-.03em;flex:1;margin:0}
.fhd .ib{width:40px;height:40px;border-radius:12px;border:1px solid var(--line);background:var(--card);color:var(--ink);display:grid;place-items:center;padding:0;text-decoration:none}
.fhd .ib svg{width:20px;height:20px}
.fhd .ib.plus{background:var(--ink);color:var(--onink);border-color:var(--ink)}
@keyframes wink{0%,100%{transform:rotate(0)}10%{transform:rotate(-8deg)}20%{transform:rotate(6deg)}30%{transform:rotate(0)}}
.hi{margin:-10px 0 0;color:var(--muted);font-size:14px}

/* section labels with a count */
.flbl{display:flex;align-items:baseline;gap:8px;font:700 11px/1 var(--sans);letter-spacing:.1em;text-transform:uppercase;color:var(--muted);margin:6px 0 -6px}
.flbl .ct{font-family:var(--mono);letter-spacing:0;background:var(--soft);border-radius:5px;padding:2px 5px;color:var(--ink)}
.flbl .q{margin-left:auto;text-transform:none;letter-spacing:0;font:500 12px/1 var(--sans)}
.fsec{display:flex;flex-direction:column;gap:10px}

/* feed cards */
.fc{background:var(--card);border:1px solid var(--line);border-radius:16px;padding:13px 14px;display:flex;flex-direction:column;gap:10px;position:relative;color:var(--ink);text-decoration:none}
.fc .ttl{display:flex;align-items:flex-start;gap:10px}
.fc .ttl .n{flex:1;min-width:0}
.fc .ttl .n b{font:700 16.5px/1.15 var(--sans);letter-spacing:-.015em;display:block;overflow-wrap:anywhere}
.fc .ttl .n span{color:var(--muted);font-size:13px}
.fc .famt{font:700 16px/1.1 var(--mono);text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
.fc .famt small{display:block;font:600 11px/1.3 var(--sans);color:var(--muted)}
.fc .famt.owe{color:var(--pinkink)}.fc .famt.up{color:var(--mintink)}
.fc .note{font-size:13px;color:var(--muted);margin:0}
.fc .av{width:32px;height:32px;border-radius:10px;font-size:12px}
.fbtns{display:flex;gap:8px}
.fbtns>*{flex:1;text-align:center;padding:10px;font-size:14px}
.fstack{display:flex;flex-shrink:0;padding-right:7px}
.fstack .av{width:28px;height:28px;border-radius:9px;font-size:9px;letter-spacing:-.03em;margin-right:-7px;box-shadow:0 0 0 2px var(--card)}
.fc .ln{display:flex;gap:8px;align-items:center;font-size:13px;color:var(--muted);border-top:1px dashed var(--line);padding-top:9px}
.fc .ln b{color:var(--ink)}

/* the seesaw: banana on a plank that tips toward the heavier side */
.net{flex-direction:row;align-items:center;gap:10px}
.net .t{flex:1;min-width:0}
.net .t small{font:700 11px/1 var(--sans);letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.net .big{font:700 27px/1.05 var(--sans);letter-spacing:-.03em;margin:6px 0 5px}
.net .big b{color:var(--mintink)}
.net .big b.neg{color:var(--pinkink)}
.net .t p{margin:0;font-size:13px;color:var(--muted)}
.saw{width:96px;height:72px;position:relative;flex-shrink:0}
.saw .plank{position:absolute;left:4px;right:4px;top:47px;height:5px;border-radius:3px;background:var(--ink);transition:transform 1.1s cubic-bezier(.3,1.5,.5,1) .3s}
.saw .plank img{position:absolute;width:25px;height:33px;left:50%;margin-left:-12.5px;top:-32px}
.saw .plank i{position:absolute;top:-18px;font:700 9.5px/1 var(--mono);font-style:normal;padding:3px 4px;border-radius:5px}
.saw .plank .l{left:-3px;background:var(--mintsoft);color:var(--mintink)}
.saw .plank .r{right:-3px;background:var(--pinksoft);color:var(--pinkink)}
.saw .pv{position:absolute;left:50%;margin-left:-9px;top:51px;width:0;height:0;border-left:9px solid transparent;border-right:9px solid transparent;border-bottom:16px solid var(--line2)}

/* who has paid: faces, paid ones get a tick, the rest stay dashed */
.peelm{display:flex;gap:7px;align-items:flex-end;flex-wrap:wrap}
.peelm .p{display:flex;flex-direction:column;align-items:center;gap:3px;font:600 10.5px/1 var(--sans);color:var(--muted);max-width:44px;text-align:center}
.peelm .p span:last-child{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:44px}
.peelm .av{position:relative;width:30px;height:30px;border-radius:9px;font-size:11px}
.peelm .av.hollow{background:transparent!important;border:1.5px dashed var(--line2);color:var(--muted)!important}
.peelm .av.paid::after{content:"";position:absolute;right:-4px;bottom:-4px;width:13px;height:13px;border-radius:50%;background:var(--mint) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M3 6.3l2 2 4-4.3' fill='none' stroke='white' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/10px no-repeat;box-shadow:0 0 0 2px var(--card)}
.peelm .av.sent::after{content:"";position:absolute;right:-4px;bottom:-4px;width:11px;height:11px;border-radius:50%;background:var(--banana);box-shadow:0 0 0 2px var(--card)}
.meter{flex:1 1 90px;align-self:center;display:flex;flex-direction:column;gap:5px;min-width:90px}
.meter .tr{height:8px;border-radius:4px;background:var(--soft);overflow:hidden}
.meter .tr i{display:block;height:100%;width:0;background:var(--banana);border-radius:4px;transition:width 1s cubic-bezier(.3,1,.4,1) .4s}
.meter span{font:600 12px/1.2 var(--sans);color:var(--muted)}

/* swipe left to act */
.sw{position:relative;border-radius:16px}
.sw .under{position:absolute;inset:0;border-radius:16px;display:flex;align-items:center;justify-content:flex-end;padding-right:22px;font:700 15px/1 var(--sans);color:#fff;background:var(--pink)}
.sw .under.nudge{background:var(--mint);color:var(--onbanana)}
.sw>.fc{touch-action:pan-y;transition:transform .3s cubic-bezier(.3,1.4,.5,1);user-select:none;-webkit-user-select:none}
.sw>.fc.drag{transition:none}

/* settled splits stack into a pile */
.pile{position:relative;padding:0 0 12px;background:none;border:0;text-align:left;width:100%;cursor:pointer;color:var(--ink);font:inherit}
.pile>.fc{z-index:2}
.pile::before,.pile::after{content:"";position:absolute;left:10px;right:10px;height:20px;bottom:6px;border:1px solid var(--line);border-radius:14px;background:var(--card);z-index:1}
.pile::after{left:20px;right:20px;bottom:0;z-index:0}
.pile.open{padding-bottom:0}
.pile.open::before,.pile.open::after{display:none}
.pile .more{display:none;flex-direction:column;border-top:1px solid var(--line);margin:2px -14px -13px}
.pile.open .more{display:flex}
.pile .more a{display:flex;align-items:center;gap:10px;padding:11px 14px;border-bottom:1px solid var(--line);font-size:13px;color:var(--ink);text-decoration:none}
.pile .more a:last-child{border-bottom:0}
.pile .more b{flex:1;font:700 14px/1.2 var(--sans);min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pile .more em{font:500 12px/1 var(--mono);font-style:normal;color:var(--muted);white-space:nowrap}
.pile .more .av{width:26px;height:26px;border-radius:8px;font-size:10px}
.tag{display:inline-block;font:700 11.5px/1 var(--sans);padding:5px 7px;border-radius:7px;white-space:nowrap}
.tag.owe{background:var(--pinksoft);color:var(--pinkink)}
.tag.chase{background:var(--bananasoft);color:var(--ink)}
.tag.sq{background:var(--soft);color:var(--muted)}
.tag.up{background:var(--mintsoft);color:var(--mintink)}

/* empty states */
.fempty{display:flex;flex-direction:column;align-items:center;text-align:center;gap:10px;padding:18px 8px}
.fempty img{width:110px;transform:rotate(-8deg)}
.fempty h2{margin:0}
.fempty p{margin:0;color:var(--muted);max-width:34ch}

/* Split page: four ways to start, fanning out of the banana */
.starts{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
.starts a,.starts button{display:flex;flex-direction:column;align-items:center;gap:7px;padding:0;background:none;border:0;text-decoration:none;color:var(--ink);font:700 12px/1.15 var(--sans);text-align:center;cursor:pointer;animation:fanin .5s cubic-bezier(.3,1.5,.5,1) both}
.starts i{width:58px;height:58px;border-radius:18px;background:var(--card);border:1px solid var(--line);display:grid;place-items:center}
.starts .hot i{background:var(--ink);color:var(--onink);border-color:var(--ink)}
.starts i svg{width:25px;height:25px}
.starts>:nth-child(1){--fx:60px;animation-delay:.02s}.starts>:nth-child(2){--fx:20px;animation-delay:.07s}.starts>:nth-child(3){--fx:-20px;animation-delay:.12s}.starts>:nth-child(4){--fx:-60px;animation-delay:.17s}
@keyframes fanin{from{opacity:0;transform:translate(var(--fx),60px) scale(.4)}to{opacity:1;transform:none}}

/* your regulars, with their balance against you */
.bunch{display:flex;gap:10px;overflow-x:auto;margin:0 -16px;padding:4px 16px;scrollbar-width:none}
.bunch::-webkit-scrollbar{display:none}
.bp{background:none!important;border:0;display:flex;flex-direction:column;align-items:center;gap:5px;cursor:pointer;padding:0;flex-shrink:0;width:52px;color:var(--ink)}
.bp .av{width:46px;height:46px;border-radius:15px;font-size:15px;transition:transform .25s cubic-bezier(.3,1.6,.5,1),box-shadow .2s}
.bp[aria-pressed="true"] .av{box-shadow:0 0 0 2px var(--bg),0 0 0 4px var(--ink);transform:translateY(-2px) rotate(-4deg)}
.bp .all{background:var(--ink)!important;color:var(--onink)!important}
.bp small{font:700 10.5px/1 var(--mono);color:var(--muted);white-space:nowrap}
.bp small.p{color:var(--mintink)}.bp small.m{color:var(--pinkink)}
.bp small{display:flex;align-items:center;gap:2px;height:15px}.bp small i{font-style:normal;font-size:14px;line-height:1}
.bp em{font:600 10.5px/1 var(--sans);font-style:normal;color:var(--muted);max-width:52px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* the activity feed: receipt stubs with a stamp */
.day{font:700 13px/1 var(--sans);color:var(--ink);display:flex;align-items:center;gap:8px;margin-top:4px}
.day::after{content:"";flex:1;height:1px;background:var(--line)}
.stub{background:var(--card);border:1px solid var(--line);border-radius:16px 16px 4px 4px;padding:13px 14px 18px;display:flex;flex-direction:column;gap:9px;position:relative;overflow:hidden;color:var(--ink);text-decoration:none}
.stub::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:8px;background:radial-gradient(circle at 5px 8px,var(--bg) 4.2px,transparent 4.8px) 0 0/10px 8px repeat-x}
.stub .ttl{display:flex;align-items:flex-start;gap:10px;padding-right:96px}
.stub .ttl .n{flex:1;min-width:0}
.stub .ttl .n b{font:700 16.5px/1.15 var(--sans);display:block;overflow-wrap:anywhere}
.stub .ttl .n span{color:var(--muted);font-size:13px}
.stub .ttl .av{width:32px;height:32px;border-radius:10px;font-size:12px}
.stub .who{display:flex;flex-direction:column;gap:6px;font-size:13px;border-top:1px dashed var(--line);padding-top:9px}
.stub .who div{display:flex;align-items:center;gap:8px}
.stub .who .av{width:22px;height:22px;border-radius:7px;font-size:9px}
.stub .who span:not(.av){flex:1;min-width:0}
.stub .who em{font:700 12px/1 var(--mono);font-style:normal;color:var(--muted)}
.stub .who em.ok{color:var(--mintink)}
.stub .who em.owe{color:var(--pinkink)}
.stamp{position:absolute;right:12px;top:13px;font:700 11px/1 var(--sans);letter-spacing:.08em;text-transform:uppercase;padding:5px 7px;border:1.5px solid currentColor;border-radius:7px;transform:rotate(-7deg);animation:stamp .45s cubic-bezier(.3,1.6,.5,1) both}
.stamp.owe{color:var(--pinkink)}.stamp.chase{color:var(--ink)}.stamp.sq{color:var(--muted)}.stamp.up{color:var(--mintink)}
@keyframes stamp{0%{transform:rotate(-7deg) scale(1.8);opacity:0}100%{transform:rotate(-7deg) scale(1);opacity:1}}
.ev{display:flex;gap:10px;align-items:flex-start;color:var(--ink);text-decoration:none}
.ev .av{width:32px;height:32px;border-radius:10px;font-size:12px}
.ev .tx{flex:1;min-width:0;font-size:14px;line-height:1.35}
.ev .tx time{display:block;font-size:12px;color:var(--muted);margin-top:2px}
.ev{flex-wrap:wrap}
.ev>.rx{flex:0 0 100%;margin-top:0}
.newsplit{display:flex;flex-direction:column;gap:18px}

@media (prefers-reduced-motion: reduce){.fhd .lg,.starts>*,.stamp{animation:none}.saw .plank,.meter .tr i,.tabbar .tile{transition:none}}

/* "Start something" sheet behind the plus */
.so{display:flex;align-items:center;justify-content:flex-start;gap:12px;border:1px solid var(--line);border-radius:14px;padding:12px;background:var(--card);color:var(--ink);text-decoration:none;text-align:left;width:100%;font:inherit;cursor:pointer}
.so i{width:40px;height:40px;border-radius:12px;background:var(--soft);display:grid;place-items:center;flex-shrink:0}
.so i svg{width:21px;height:21px}
.so b{font:700 15px/1.15 var(--sans);display:block}
.so span{font-size:12.5px;color:var(--muted);font-weight:400}
/* every row the same height: title + one line of copy */
.so{min-height:66px}
.so>div{flex:1;min-width:0}
.so.hot.c-scan i,.c-scan>i{background:var(--banana);color:#2B1B10}
.c-join>i{background:var(--mintsoft);color:var(--mintink)}
.c-link{--sob:#E1EEFF;--soi:#1F5FA8}
.c-up>i{background:var(--pinksoft);color:var(--pinkink)}
.c-type{--sob:#EEE6FF;--soi:#5B3FB0}
.c-link>i,.c-type>i{background:var(--sob);color:var(--soi)}
:root[data-theme="dark"] .c-link{--sob:#16283D;--soi:#9CC8FF}
:root[data-theme="dark"] .c-type{--sob:#2A2240;--soi:#C3B2FF}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .c-link{--sob:#16283D;--soi:#9CC8FF}:root:not([data-theme="light"]) .c-type{--sob:#2A2240;--soi:#C3B2FF}}
.so>div span{display:block;line-height:1.35;margin-top:3px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.starts{align-items:start}
.starts button{padding:0!important;border:0!important;background:none!important;box-shadow:none!important;border-radius:0!important;font:700 12px/1.15 var(--sans)!important;color:var(--ink)!important}

/* reactions to paying up */
.rx{display:flex;gap:4px;flex-wrap:wrap;margin-top:7px}
.rx button,.rx span{border:1px solid var(--line)!important;background:var(--card)!important;border-radius:9px!important;padding:4px 6px!important;font:700 12px/1 var(--sans)!important;color:var(--muted)!important;display:inline-flex;gap:4px;align-items:center;box-shadow:none!important;cursor:pointer;min-height:28px}
.rx span{cursor:default;background:var(--bananasoft)!important;color:var(--ink)!important;border-color:transparent!important}
.rx button[aria-pressed="true"]{background:var(--bananasoft)!important;border-color:var(--banana)!important;color:var(--ink)!important;animation:bump .35s}
.rx em{font:500 11px/1 var(--mono);font-style:normal}
/* the row under a payment spans the whole column: eight equal chips, then the i */
.rx:not(.own){display:grid;grid-template-columns:repeat(8,minmax(0,1fr)) 28px;gap:5px;align-items:center}
.rx:not(.own) button[data-rx]{justify-content:center;padding:4px 0!important;min-height:36px;font-size:16px!important;flex-direction:column;gap:1px}
.rx:not(.own) button[data-rx] em{font-size:10px}
.rxi{width:24px;height:24px;min-height:0!important;padding:0!important;border-radius:50%!important;border:1.5px solid var(--line2)!important;background:var(--card)!important;color:var(--muted)!important;font:italic 700 13px/1 Georgia,serif!important;display:inline-flex;align-items:center;justify-content:center;box-shadow:none!important;cursor:pointer;flex-shrink:0;justify-self:center}
.rx.own{align-items:center}
.rxsaid{grid-column:1/-1;margin:2px 0 0;font-size:12.5px;line-height:1.35;color:var(--muted)}
.rxsaid b{color:var(--ink)}
.rating{position:relative}
.rating .rhead .rxi{position:absolute;top:12px;right:12px;width:28px;height:28px;font-size:15px!important}
.rating .ladder{cursor:pointer}
.rhead{padding-right:30px}.rhead small{display:block;line-height:1.35!important}
.rxlede{margin:0;font-size:14px;color:var(--muted);line-height:1.4}
.rxdl{margin:0;display:flex;flex-direction:column;gap:2px}
.rxdl div{display:grid;grid-template-columns:30px 1fr;column-gap:10px;padding:9px 0;border-top:1px dashed var(--line)}
.rxdl dt{grid-row:1/3;display:contents;font:700 15px/1.2 var(--sans)}
.rxdl dt span{grid-row:1/3;font-size:24px;line-height:1}
.rxdl dd{grid-column:2;margin:2px 0 0;font-size:13.5px;line-height:1.35;color:var(--muted)}
@keyframes bump{40%{transform:scale(1.12)}}
.paidrow{display:flex;flex-direction:column;gap:10px;border-top:1px dashed var(--line);padding-top:9px}
.paidrow>div{display:flex;align-items:center;gap:8px;flex-wrap:wrap;font-size:13px}
.paidrow .av{width:24px;height:24px;border-radius:8px;font-size:9.5px}
.paidrow b{margin-right:auto}
.paidrow .rx{margin-top:0;width:100%}
/* payer rating on the You tab */
.rating{flex-direction:row;align-items:center;gap:12px;overflow:hidden}
.rating .t{flex:1;min-width:0;display:flex;flex-direction:column;gap:5px}
.rating small{font:700 11px/1 var(--sans);letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.rating .big{font:700 24px/1.08 var(--sans);letter-spacing:-.03em}
.rating p{margin:0;font-size:13px;color:var(--muted)}
.rating .remoji{font-size:54px;line-height:1;flex-shrink:0;transform:rotate(8deg)}
.rbar{height:8px;border-radius:4px;background:var(--pinksoft);overflow:hidden;margin-top:4px}
.rbar i{display:block;height:100%;background:var(--mint);border-radius:4px}
.rnums{display:flex;flex-wrap:wrap;gap:10px;font:600 12px/1 var(--sans);color:var(--muted)}
.rnums span{font-size:15px}.rnums em{font:700 12px/1 var(--mono);font-style:normal;color:var(--ink)}
.ladder{display:grid;grid-template-columns:repeat(4,1fr);gap:4px;margin-top:6px}
.ladder span{display:flex;flex-direction:column;align-items:center;gap:3px;font-size:18px;padding:6px 0;border-radius:9px;opacity:.45;filter:grayscale(.6)}
.ladder small{font:600 10.5px/1.15 var(--sans)!important;text-transform:none!important;letter-spacing:0!important;color:var(--muted);text-align:center}
.ladder .on{opacity:1;filter:none;background:var(--bananasoft);box-shadow:inset 0 0 0 1.5px var(--banana)}
.ladder .on small{color:var(--ink)}
.rating .t{min-width:0}
/* what you had, receipt style */
.stub .rcpt{display:flex;flex-direction:column;gap:5px;border-top:1px dashed var(--line);padding-top:9px;font:500 12.5px/1.2 var(--mono);color:var(--muted)}
.stub .rcpt div{display:flex;align-items:baseline;gap:6px}
.stub .rcpt i{flex:1;border-bottom:1.5px dotted var(--line2);transform:translateY(-3px)}
.stub .rcpt b{font-weight:700;color:var(--ink)}
.stub .rcpt .tot{margin-top:3px;color:var(--ink);font-weight:700}
.stub .rcpt .tot b{color:var(--pinkink)}
.so.hot i{background:var(--ink);color:var(--onink)}
.hhero .link,.hhero a.link{color:var(--onbanana,#2B1B10)!important}
/* Home hero: tall on phones so the banana sits under the title, snug beside it on wider screens */
.ohero.hhero.hh2{min-height:330px}
.ohero.hhero.hh2 img{width:min(210px,56%);bottom:-18px;right:-4px}
@media (min-width:600px){.ohero.hhero.hh2{min-height:0;padding-bottom:22px}.ohero.hhero.hh2 img{width:104px;bottom:-12px;right:32px}}
/* Tab icons sit in colored boxes in the banana's style; the tab you're on grows into the big raised tile */
.tabbar a[aria-current="page"]::before{display:none}
.tabbar a,.tabbar a.peel{margin-top:0;gap:4px;justify-content:flex-end}
.tabbar a.peel span:last-child{color:inherit}
.tabbar a[aria-current="page"]>span:last-child{color:var(--ink)}
.tabbar .ibx{position:relative;width:36px;height:36px;border-radius:12px;display:grid;place-items:center;color:var(--ink);font:700 12px/1 var(--sans);transition:width .3s cubic-bezier(.3,1.6,.5,1),height .3s cubic-bezier(.3,1.6,.5,1),margin .3s,border-radius .3s,transform .35s cubic-bezier(.3,1.6,.5,1)}
.tabbar .ibx img{display:block;width:28px;height:28px;transition:width .3s,height .3s,transform .35s cubic-bezier(.3,1.6,.5,1)}
.tabbar .ibx.hm{background:var(--mintsoft)}
.tabbar .ibx.gp{background:var(--pinksoft)}
.tabbar .ibx.me{background:var(--bananasoft)}
.tabbar .ibx.gy{background:#EDE4FB}
:root[data-theme="dark"] .tabbar .ibx.gy{background:#2E2440}
.tabbar .ibx.sp{background:var(--banana)}
.tabbar .ibx.sp img{width:21px;height:28px}
.tabbar a[aria-current="page"] .ibx{width:56px;height:56px;border-radius:18px;margin-top:-20px;font-size:17px;box-shadow:0 0 0 5px var(--bg),0 0 0 6.5px var(--ink)}
.tabbar a[aria-current="page"] .ibx img{width:42px;height:42px}
.tabbar a[aria-current="page"] .ibx.sp img{width:32px;height:42px}
.tabbar .ibx.pz{overflow:hidden}.tabbar .ibx.pz img,.tabbar a[aria-current="page"] .ibx.pz img{width:100%;height:100%}
.tabbar a[aria-current="page"]{gap:11px}
.tabbar a:active .ibx,.tabbar a.go .ibx{transform:rotate(-12deg) scale(1.06)}
@media (prefers-reduced-motion: reduce){.tabbar .ibx,.tabbar .ibx img{transition:none}}
/* Peelz says hi: a speech bubble beside the hero banana, first visit only */
.ohero.hhero .peelzhi{position:absolute;left:18px;bottom:150px;z-index:2;max-width:none;margin:0;background:var(--card,#fff);color:var(--ink);font-weight:700;font-size:13.5px;line-height:1.25;padding:9px 12px;border-radius:14px;box-shadow:0 2px 10px rgba(0,0,0,.12);animation:peelzhi .5s ease-out both .3s}
.ohero.hhero .peelzhi::after{content:"";position:absolute;right:-5px;top:50%;margin-top:-6px;width:12px;height:12px;background:inherit;transform:rotate(45deg);border-radius:2px}
@keyframes peelzhi{from{opacity:0;transform:translateY(6px) scale(.96)}to{opacity:1;transform:none}}
@media (min-width:600px){.ohero.hhero .peelzhi{left:auto;bottom:auto;right:122px;top:30px}}
@media (prefers-reduced-motion:reduce){.ohero.hhero .peelzhi{animation:none}}