*{box-sizing:border-box} :root{--red:#ff0000;--ink:#282828;--muted:#858585;--bg:#f1f1f4}body{margin:0;background:#e9eaee;color:var(--ink);font:15px/1.45 Arial,sans-serif;display:flex;justify-content:center;align-items:flex-start;gap:48px;padding:38px 28px}button,input,select,textarea{font:inherit}button,a,select{cursor:pointer}button{border:0;background:transparent;color:inherit}button:focus-visible,a:focus-visible{outline:3px solid #ff9797;outline-offset:3px}h1,h2,h3,p{margin:0}h1{font-size:38px;line-height:1.12;letter-spacing:-1.3px;margin:22px 0}h2{font-size:21px;line-height:1.2}h3{font-size:19px;margin-bottom:14px}p{margin-bottom:14px}.guide{width:280px;position:sticky;top:35px}.brand{color:red;font-size:33px;font-weight:950;font-style:italic;letter-spacing:-2px}.brand span{display:block;font-size:9px;letter-spacing:2px;font-style:normal;color:#555}.eyebrow{font-size:10px;letter-spacing:1.6px;color:#888;margin-top:36px}.guide>p:not(.eyebrow){color:#777}#desktopNav{display:grid;gap:3px;margin:26px 0}#desktopNav button{text-align:left;padding:11px 15px;border-radius:12px;color:#666}#desktopNav button.active{background:white;color:red;font-weight:bold}.review{border-top:1px solid #d4d5d8;padding-top:20px}.review select{margin:8px 0 12px;background:white}.review button{color:#777;padding:8px 0}.review small{display:block;color:#999;font-size:11px;margin-top:10px}.phone{width:410px;flex-shrink:0;background:var(--bg);min-height:850px;border:7px solid #222;border-radius:39px;overflow:hidden;position:relative;box-shadow:0 24px 65px #24272d20}.statusbar{background:white;padding:10px 22px 4px;font-size:12px;display:flex;justify-content:space-between}header{display:flex;align-items:center;gap:12px;padding:18px 14px 22px;background:white;border-radius:0 0 26px 26px;position:relative}.icon{font-size:23px;min-width:32px;position:relative}header h2{flex:1}i#dot{position:absolute;right:4px;top:2px;width:6px;height:6px;border-radius:50%;background:red}main{padding:16px 0 90px;min-height:680px}.card{background:white;border-radius:25px;padding:21px;margin-bottom:12px}.row{display:flex;align-items:center;gap:12px}.between{justify-content:space-between}.muted,small{color:var(--muted)}small{font-size:12px}.red{color:red}.green{color:#13a235}.orange{color:#e48b15}.link{color:red;padding:0}.pill{padding:5px 10px;border-radius:20px;background:#f1f1f4;font-size:12px;display:inline-block}.primary{background:red;color:white;border-radius:30px;min-height:48px;width:100%;font-weight:bold;margin-top:16px;padding:12px}.primary:disabled{background:#dadadd;cursor:default}.secondary{border:1px solid #ddd;border-radius:25px;padding:10px 17px}.avatar{width:90px;height:90px;object-fit:cover;border:3px solid red;border-radius:50%;margin:18px auto 12px;display:block}.profile{text-align:center}.profile h2{font-size:23px;margin:8px 0}.profile .muted{font-size:14px}.balance{background:#fff0ee;border-radius:16px;padding:17px;display:flex;justify-content:space-between;align-items:center}.balance strong{font-size:27px}.coin{display:inline-grid;place-items:center;background:red;color:white;border:3px solid #ffb1a5;border-radius:50%;width:41px;height:41px;font-style:italic;font-weight:bold}.grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}.product{padding:0;text-align:left;min-width:0}.product h3{font-size:16px;margin:9px 0 2px}.product strong{display:block;margin-top:7px}.art{height:153px;background:#f5f3f0;border-radius:18px;display:grid;place-items:center;position:relative;overflow:hidden}.art svg{width:82%;height:82%;filter:drop-shadow(0 9px 5px #00000012)}.art .pill{position:absolute;top:8px;left:8px;background:white;font-size:10px}.art.big{height:275px;margin-bottom:18px}.chips{display:flex;gap:7px;overflow:auto;padding:2px 0 14px;scrollbar-width:none}.chips button{white-space:nowrap;border-radius:22px;background:#f1f1f4;padding:8px 13px;font-size:13px}.chips button.selected{background:#282828;color:white}.filters{border-bottom:1px solid #eee;padding-bottom:12px;margin-bottom:17px}.filters select{font-size:12px;padding:9px;margin:0}input,select,textarea{width:100%;border:1px solid transparent;background:#f1f1f4;padding:13px;border-radius:12px;color:#333;min-width:0}input:focus,select:focus,textarea:focus{outline-color:#ff7777}label{font-size:13px;display:block;margin:12px 0 6px}label input,label select,label textarea{display:block;margin-top:6px}label:has(input:required)::first-letter{color:inherit}.transaction{padding:15px 0;border-bottom:1px solid #eee}.transaction:last-child{border:0}.transaction b{font-size:14px}.transaction small{display:block;margin-top:3px}.bottom{display:flex;justify-content:space-around;background:white;border-top:1px solid #eee;position:absolute;bottom:0;width:100%;padding:12px 3px 17px;z-index:3}.bottom button{font-size:10px;color:#888;display:grid;gap:4px;text-align:center}.bottom span{font-size:21px;line-height:1}.bottom .active{color:red}.badge{width:76px;height:84px;clip-path:polygon(50% 0,97% 24%,97% 76%,50% 100%,3% 76%,3% 24%);background:linear-gradient(135deg,#b4a5ff,#6952f5);display:grid;place-items:center;font-size:33px;margin:0 auto 12px;filter:drop-shadow(0 6px 8px #9783ff30)}.achievement{padding:21px 14px;text-align:center;width:100%;background:white;border-radius:23px}.achievement b{display:block;font-size:14px}.achievement small{display:block;margin-top:7px}progress{width:100%;height:6px;accent-color:red;margin:10px 0 2px}.level{font-size:11px;color:#888}.achievement.locked{opacity:.55}.leader{padding:13px 0;border-bottom:1px solid #eee}.initial{width:39px;height:39px;border-radius:50%;background:#f5e8df;display:grid;place-items:center;font-weight:bold}.leader.me{background:#fff0ee;margin:0 -10px;padding:13px 10px;border-radius:12px}.rank{width:20px;text-align:center;font-size:14px}.order{border:1px solid #eee;border-radius:16px;padding:15px;margin-top:13px}.order .art{width:65px;height:65px;flex-shrink:0}.order small{display:block}.order h3{font-size:15px;margin:0}.timeline{margin:20px 0}.timeline>div{border-left:2px solid #eee;margin-left:7px;padding:0 0 21px 20px;position:relative}.timeline>div:before{content:'';position:absolute;background:#ddd;width:10px;height:10px;border-radius:50%;left:-6px;top:5px}.timeline>.done:before{background:red}.success{text-align:center;padding:34px 20px}.successmark{background:#e9f7e9;color:#14a835;width:80px;height:80px;border-radius:50%;display:grid;place-items:center;font-size:45px;margin:15px auto 22px}details{border-bottom:1px solid #eee;padding:17px 0}summary{cursor:pointer;font-weight:bold;list-style:none;display:flex;justify-content:space-between}summary:after{content:'⌄';color:#999}details p{color:#777;font-size:14px;margin-top:12px}.context{width:235px;position:sticky;top:48px;padding-top:5px}.context h3{font-size:22px;margin:13px 0 24px}.context button{display:flex;align-items:center;text-align:left;gap:13px;border-top:1px solid #d3d4d7;width:100%;padding:19px 0}.context button>b{color:red;font-size:12px}.context span{flex:1}.context small{display:block;font-size:11px;margin-top:4px}.context p,.note{color:#888;font-size:12px;margin-top:24px}.note{border:1px solid #d4d4d8;border-radius:14px;padding:15px}.scrim{position:absolute;inset:0;background:#0007;z-index:10;display:flex;align-items:flex-end}.sheet{background:white;padding:25px;border-radius:25px 25px 0 0;width:100%;max-height:90%;overflow:auto}.sheet .close{float:right;font-size:24px}.sheet nav{display:grid}.sheet nav button{text-align:left;padding:14px 0;border-bottom:1px solid #eee}#toast{position:absolute;bottom:90px;background:#292929;color:white;border-radius:14px;padding:12px 18px;left:20px;right:20px;z-index:15;display:none;font-size:13px}.empty{text-align:center;padding:35px 10px;color:#888}.stat{background:#f5f5f7;padding:15px;border-radius:13px}.stat strong{font-size:25px;display:block}.fieldrow{display:grid;grid-template-columns:1fr 1fr;gap:10px}.info{background:#fff5ee;padding:13px;border-radius:12px;font-size:12px;color:#8b684f;margin:14px 0}.check{display:flex;align-items:center;gap:9px}.check input{width:auto}.error{color:red;font-size:12px}.subheading{font-size:13px;color:#999;margin:20px 0 10px}.tabbar{display:flex;border-bottom:1px solid #eee;margin-bottom:18px}.tabbar button{flex:1;padding:12px 3px;font-size:13px}.tabbar .selected{color:red;border-bottom:2px solid red}@media(max-width:1150px){.context{display:none}body{gap:35px}}@media(max-width:760px){body{padding:0;background:var(--bg)}.guide{display:none}.phone{width:100%;max-width:480px;border:0;border-radius:0;box-shadow:none;min-height:100dvh}.statusbar{padding-top:10px}.bottom{position:fixed;max-width:480px;bottom:0}.phone main{min-height:calc(100dvh - 100px)}.scrim{position:fixed;max-width:480px;left:50%;transform:translateX(-50%)}#toast{position:fixed;max-width:420px;margin:auto}.art{height:clamp(135px,39vw,180px)}}
.green{color:#00a400}.product .art{transition:transform .2s}.product:hover .art{transform:translateY(-3px)}
/* Keep scrolling inside the application viewport. */
body{height:100dvh;overflow:hidden}
.phone{height:calc(100dvh - 76px);min-height:0;display:flex;flex-direction:column}
.statusbar,header,.bottom{flex-shrink:0}
.phone main{flex:1;min-height:0;overflow-y:auto;overscroll-behavior-y:contain;padding-bottom:16px;scrollbar-width:thin;scrollbar-color:#d1d1d6 transparent}
.phone .bottom{position:relative;bottom:auto;width:100%;max-width:none}
.guide,.context{max-height:calc(100dvh - 76px);overflow-y:auto;scrollbar-width:thin}
@media(max-width:760px){
 .phone{height:100dvh;min-height:0}
 .phone main{min-height:0}
 .phone .bottom{padding-bottom:max(17px,env(safe-area-inset-bottom))}
 .phone .scrim{position:absolute;max-width:none;left:0;transform:none}
 .phone #toast{position:absolute;max-width:none}
}