/* Remaining rail cells: large, physical tokens next to the active recipient. */
#budget.quota-chip{position:absolute;left:calc(100% + 9px);top:50%;margin-top:-23px;width:clamp(64px,18cqw,110px);height:clamp(46px,12cqw,76px);display:grid;grid-template-columns:1fr 1fr;grid-template-rows:1fr 9px;align-items:center;justify-items:center;gap:0 3px;padding:5px 7px 4px;border:2px solid #fff0bd;border-radius:14px;background:linear-gradient(#ffe2a0,#edc273);box-shadow:inset 0 2px #fff5cf,0 4px #a17e49,0 7px #53765033;color:#705832;text-shadow:none;transform:rotate(1deg);z-index:2;cursor:pointer}
#budget[hidden]{display:none!important}
#budget .track-token{width:clamp(23px,6cqw,36px);height:clamp(23px,6cqw,36px)}
.quota-number{font:1000 clamp(23px,6.3cqw,42px)/1 "Avenir Next",sans-serif;font-variant-numeric:tabular-nums;text-shadow:0 1px #fff2c4}
.quota-slots{grid-column:1/-1;display:flex;justify-content:center;align-items:center;gap:4px;height:9px}
.quota-slots i{width:10px;height:6px;border:1px solid #b38e55;border-radius:2px;background:#a9906033}
.quota-slots i.available{background:#739165;border-color:#668358;box-shadow:0 1px #fff2c5}
.quota-slots svg{width:11px;height:11px;opacity:.7}
#budget.is-empty{background:linear-gradient(#e1d7b3,#cbb78e);border-color:#f3e5be;color:#8c795b;box-shadow:inset 0 2px #f5ebcf,0 4px #948263,0 7px #53765033}
#budget.is-intro{outline:3px solid #fff5c7;outline-offset:3px;animation:quota-arrival .55s cubic-bezier(.2,.8,.25,1) both}
#budget.is-intro::after{content:"";position:absolute;inset:-8px;border:2px solid #ffe8a3;border-radius:20px;pointer-events:none;animation:quota-beacon 1.1s ease-out 3}
#budget[data-feedback="denied"]{color:#a54f37;border-color:#ffe2b5;background:linear-gradient(#f6cb98,#e8b17b)}
#budget[data-feedback="refund"]{border-color:#e4f0bd;background:linear-gradient(#dce8a9,#aec78a);color:#52754d}
#budget:active{box-shadow:inset 0 2px #fff4c1,0 1px #a17e49;translate:0 3px}
.how-title{margin:0 0 17px!important;font-size:25px!important;letter-spacing:1px}
.how-steps{display:grid;gap:0;text-align:left}
.how-step{display:grid;grid-template-columns:65px minmax(0,1fr);gap:12px;align-items:center;padding:16px 0;border-bottom:1px dashed #c9b88388}
.how-step:last-child{border-bottom:0}
.how-picture{position:relative;display:flex;align-items:center;justify-content:center;min-height:49px;color:#668158}
.how-turn>.track-token{width:43px;height:43px;rotate:-8deg}
.how-turn>span{position:absolute;bottom:-2px;right:2px;font-size:24px;font-weight:900;color:#7e9563;text-shadow:0 1px #fff2cd}
.how-step h4{font-size:15px;line-height:1.45;margin:0 0 5px;font-weight:850;color:#4d7357}
.how-step p{margin:0;font-size:13px;line-height:1.7;color:#8b7b56}
.how-step .help-recipients{gap:3px}
.how-step .help-recipients .recipient-avatar{width:26px;height:30px;padding:0;border:0;border-radius:0;background:none}
.how-step .help-recipients>span{font-size:15px;color:#b49c67}
.how-quota-token{display:flex;align-items:center;gap:4px;background:#f3d698;border:2px solid #ffedbb;border-radius:10px;padding:4px;box-shadow:0 3px #c5a067}
.how-quota-token .track-token{width:28px;height:28px}
.how-quota-token strong{font-size:23px;color:#8c6c3b}
#modal[data-kind="help"] .menu-sheet{padding-top:40px}
#modal[data-kind="help"] .modal-primary{max-width:170px;height:51px;margin-top:16px}
@keyframes quota-arrival{0%{transform:rotate(-8deg) scale(.6)}65%{transform:rotate(2deg) scale(1.2)}100%{transform:rotate(1deg) scale(1)}}
@keyframes quota-beacon{0%{opacity:.9;transform:scale(.95)}100%{opacity:0;transform:scale(1.35)}}
body.reduce-motion #budget::after{animation:none;display:none}
@media(prefers-reduced-motion:reduce){#budget::after{animation:none;display:none}}
@media(max-width:350px){.how-step{grid-template-columns:61px minmax(0,1fr);gap:9px;padding:13px 0}.how-step h4{font-size:14px}.how-step p{font-size:12px}}

.controls #help svg{width:8cqw;height:8cqw}