@font-face{font-family:Outfit;src:url(/outfit.woff2) format("woff2");font-weight:100 900;font-display:swap}
:root{--bg:#E9EAEB;--top:#DDE0E2;--text:#282A2C;--muted:#6C7073;--rule:#D3D5D7;--card:#F4F4F3;--cardrule:#E0E3E4;--sheet:#F7F5F1;--srule:#E7E3DC;
--sarah:#A9BBC7;--eric:#97C4CC;--aria:#D4AB86;--leila:#C49FBF;--you:#AEC789;--mitsuka:#E4C9DF;--send:#AED48A;
--m-surf:#B0C7D6;--m-field:#DBE5EC;--m-muted:#526473;--m-rule:#CBD6DF;--m-ink:#21252A;
--places:#E0C98A;--kith:#D49C92;--rove:#96C3CD;--porch:#C49FBF;--mohn:#A8BAC6;--photo:#96C3CD;--list:#F1F2F3}
*{box-sizing:border-box}
html,body{margin:0;height:100%;background:var(--bg)}
body{font-family:Outfit,system-ui,sans-serif;color:var(--text);-webkit-font-smoothing:antialiased;font-size:15px}
button{font:inherit;color:inherit}
:focus-visible{outline:2px solid #526473;outline-offset:2px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.hide{display:none!important}
/* layout */
.shell{display:flex;height:100vh;height:100dvh}
.list{width:330px;flex:none;background:var(--list);border-right:1px solid var(--rule);display:flex;flex-direction:column;min-height:0}
.pane{flex:1;display:flex;flex-direction:column;min-width:0;position:relative;min-height:0}
.brand{display:flex;align-items:center;gap:10px;padding:16px 18px 12px}
.brand h1{font-size:20px;font-weight:600;margin:0;letter-spacing:.01em}
.pill{font-size:11.5px;letter-spacing:.04em;padding:3px 8px;border-radius:6px;background:#F0DFEC;color:#5d4b59;border:1px solid #D5BCCF}
.convs{list-style:none;margin:0;padding:0;overflow:auto;flex:1}
.conv{display:flex;gap:12px;align-items:center;width:100%;border:0;background:none;text-align:left;padding:12px 18px;cursor:pointer;border-top:1px solid var(--rule)}
.conv:hover{background:rgba(255,255,255,.5)}
.conv[aria-current="true"]{background:#fff}
.conv .gav{width:40px;height:40px;border-radius:6px;flex:none;display:grid;place-items:center;font-size:13px;color:#282A2C}
.conv .cx{flex:1;min-width:0}
.conv .cn{display:flex;justify-content:space-between;gap:8px;font-size:15.5px;font-weight:500}
.conv .ct{font-size:12px;color:var(--muted);font-weight:400}
.conv .cp{font-size:13px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-top:2px}
.note{font-size:12px;color:var(--muted);line-height:1.5;padding:12px 18px 16px;border-top:1px solid var(--rule)}
header.ch{background:var(--top);padding:14px 18px 12px;display:flex;gap:12px;align-items:center;flex:none}
header.ch h2{font-size:18.5px;font-weight:600;margin:0}header.ch small{font-size:12.5px;color:var(--muted)}
.ib.back{display:none}
.ib{width:40px;height:40px;display:grid;place-items:center;border:0;background:none;color:var(--muted);cursor:pointer;border-radius:6px;flex:none}
.ib:hover{background:rgba(0,0,0,.04)}
.ib svg,.blk svg,.help svg{width:16px;height:16px}
.ib.back svg{width:20px;height:20px}
main.chat{flex:1;overflow:auto;padding:14px 18px 24px}
.chat-inner{max-width:560px}
footer.comp{display:flex;gap:10px;align-items:center;padding:12px 14px;border-top:1px solid var(--rule);background:var(--bg);flex:none}
footer.comp input{flex:1;min-width:0;background:#F5F5F5;border:1px solid var(--rule);border-radius:6px;padding:11px 12px;color:var(--text);font:inherit;font-size:16px}
.send{width:42px;height:42px;border-radius:6px;background:var(--send);display:grid;place-items:center;border:0;cursor:pointer;color:#282A2C}
.send svg{width:16px;height:16px}
.send:disabled{opacity:.55;cursor:default}
@media (max-width:767px){
 .list{width:100%;border:0}.pane{display:none}
 .in-chat .list{display:none}.in-chat .pane{display:flex}
 .ib.back{display:grid;margin-left:-10px}
}
/* chat */
.day{text-align:center;font-size:11.5px;letter-spacing:.06em;color:var(--muted);margin:6px 0 18px;text-transform:uppercase}
.msg{display:flex;gap:10px;margin:0 0 14px;align-items:flex-start}
.av{flex:none;width:30px;height:30px;border-radius:50%;font-size:11px;display:grid;place-items:center;margin-top:18px;color:#282A2C}
.who{font-size:12px;color:var(--muted);margin:0 0 4px 2px}
.b{display:inline-block;padding:10px 13px;border-radius:6px;font-size:15.5px;line-height:1.35;color:#282A2C;max-width:270px;overflow-wrap:anywhere;white-space:pre-wrap}
.t{font-size:11px;color:var(--muted);margin:4px 0 0 2px}
.mine{justify-content:flex-end}.mine>div{display:flex;flex-direction:column;align-items:flex-end}
.mine .b{background:var(--you)}
.sys{text-align:center;font-size:12.5px;color:var(--muted);margin:6px 0 14px;line-height:1.5}
.lk{background:none;border:0;padding:0;color:inherit;text-decoration:underline;text-underline-offset:3px;cursor:pointer;font-size:inherit}
.c-sarah{background:var(--sarah)}.c-eric{background:var(--eric)}.c-aria{background:var(--aria)}.c-leila{background:var(--leila)}.c-mitsuka{background:var(--mitsuka)}.c-you{background:var(--you)}
.c-places{background:var(--places)}.c-kith{background:var(--kith)}.c-rove{background:var(--rove)}.c-porch{background:var(--porch)}.c-mohn{background:var(--mohn)}
/* generic card */
.card{background:var(--card);border-radius:6px;width:300px;max-width:calc(100vw - 88px);overflow:hidden;box-shadow:0 1px 2px rgba(0,0,0,.06);color:var(--text);text-align:left}
.card .in{padding:13px 14px}
.card h3{margin:0 0 3px;font-size:16.5px;font-weight:600;line-height:1.25}
.meta{font-size:13px;color:var(--muted);line-height:1.45}
.row{display:flex;justify-content:space-between;align-items:center;gap:10px;font-size:14px;padding:8px 0}
.row+.row{border-top:1px solid var(--cardrule)}
.row span:first-child{color:var(--muted);font-size:13px}.row span:last-child{text-align:right}
.acts{display:flex;gap:8px;align-items:center;padding:11px 14px;border-top:1px solid var(--cardrule);flex-wrap:wrap}
.btn{font-size:14px;padding:8px 13px;border-radius:6px;border:0;background:var(--app,#C49FBF);color:#282A2C;cursor:pointer;white-space:nowrap}
.btn:hover{filter:brightness(1.05)}
.btn.ghost{background:transparent;border:1.5px solid #B7B9BC}
.btn.done{background:var(--you)}
.btn:disabled{opacity:.5;cursor:default}
.open{margin-left:auto;font-size:13px;background:none;border:0;padding:4px 0;text-decoration:underline;text-underline-offset:3px;cursor:pointer;white-space:nowrap}
.app{font-size:11.5px;letter-spacing:.05em;text-transform:uppercase;color:var(--muted);display:flex;align-items:center;gap:6px;margin-bottom:8px}
.app i{width:9px;height:9px;border-radius:2px;display:inline-block}
.src{font-size:12.5px;color:var(--muted);padding:10px 14px;border-top:1px solid var(--cardrule);line-height:1.45}
.src q{font-style:italic}
.bk{font-size:13px;color:var(--muted);padding:9px 14px;border-top:1px solid var(--cardrule);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.bk .lk{color:var(--text)}
.people{display:flex;gap:5px;flex-wrap:wrap;margin-top:8px;align-items:center}
.p{font-size:12.5px;padding:3px 8px;border-radius:6px}
.ph{height:72px;border-radius:4px;margin:0 0 10px;background:linear-gradient(180deg,#cfdde4 0 45%,transparent 45%),linear-gradient(160deg,#5f7a62 0 30%,#7d9673 30% 60%,#a9b48a 60%);position:relative}
.ph::after{content:"";position:absolute;left:44%;bottom:12px;width:50px;height:30px;background:#8a5b3d;clip-path:polygon(0 40%,50% 0,100% 40%,100% 100%,0 100%)}
.ph.b2{background:linear-gradient(180deg,#d8dfe6 0 40%,transparent 40%),linear-gradient(170deg,#6f8a9a 0 35%,#9fb1a0 35%)}
.suggest{margin:4px 0 16px 40px;background:#fff;border-radius:6px;padding:11px 13px;width:300px;max-width:calc(100vw - 76px);box-shadow:0 1px 3px rgba(0,0,0,.08);font-size:14px;line-height:1.4}
.suggest .for{font-size:11.5px;color:var(--muted);margin-bottom:5px;display:flex;align-items:center;gap:5px}
.suggest .for svg{width:13px;height:13px}
.suggest .acts{padding:10px 0 0;border:0}
.pv{margin:-6px 0 14px 40px}
.demo-t{font-size:12px;color:var(--muted);background:none;border:1px dashed #B7B9BC;border-radius:6px;padding:4px 9px;cursor:pointer}
.demo{font-size:11.5px;color:var(--muted)}
.hint{font-size:12px;color:var(--muted);margin:-4px 0 14px 40px}
/* dinner */
.dish{background:var(--m-surf);border-radius:6px;width:296px;max-width:calc(100vw - 88px);color:var(--m-ink);overflow:hidden}
.dish .top{display:flex;gap:12px;padding:12px}
.dph{width:70px;height:70px;border-radius:4px;flex:none;background:radial-gradient(circle at 35% 40%,#d9a24a 0 18%,transparent 19%),radial-gradient(circle at 62% 58%,#b5652e 0 22%,transparent 23%),radial-gradient(circle at 50% 50%,#e9d6a8 0 46%,#7a4a2a 47% 52%,#3d3a36 53%)}
.dph.d2{background:radial-gradient(circle at 40% 45%,#7fa35a 0 20%,transparent 21%),radial-gradient(circle at 62% 55%,#e8c46a 0 18%,transparent 19%),radial-gradient(circle at 50% 50%,#efe4cf 0 46%,#5b5146 47% 52%,#3d3a36 53%)}
.dph.d3{background:radial-gradient(circle at 50% 50%,#c4472f 0 30%,#e9c99a 31% 46%,#6b4a32 47% 52%,#3d3a36 53%)}
.dish h3{margin:2px 0 4px;font-size:16px;font-weight:600;line-height:1.2}
.dish .meta{color:var(--m-muted)}.dish .open{color:var(--m-ink);margin:6px 0 0;font-size:12px}
.go{display:flex;align-items:center;justify-content:space-between;width:100%;border:0;border-top:1px solid var(--m-rule);background:transparent;font-size:14.5px;color:var(--m-ink);padding:12px 14px;cursor:pointer;text-align:left}
.go:hover{background:rgba(255,255,255,.18)}.go svg{width:16px;height:16px}
.sec{padding:12px 14px;border-top:1px solid var(--m-rule)}
.lab{font-size:11.5px;letter-spacing:.05em;text-transform:uppercase;color:var(--m-muted);margin-bottom:8px;display:flex;justify-content:space-between}
.lab b{color:var(--m-ink);font-weight:600}
.eaters{display:flex;gap:6px;flex-wrap:wrap}
.chip{font-size:13px;padding:5px 10px;border-radius:6px;background:var(--m-field);color:var(--m-ink)}
.chip.out{background:transparent;color:var(--m-muted);text-decoration:line-through}
.join{font-size:13px;padding:5px 10px;border-radius:6px;border:1.5px dashed var(--m-muted);background:transparent;color:var(--m-ink);cursor:pointer}
.join.on{border:1.5px solid var(--you);background:var(--you);color:#282A2C}
ul.ing{list-style:none;margin:0;padding:0}
ul.ing>li{padding:7px 0}ul.ing>li+li{border-top:1px solid var(--m-rule)}
.il{display:flex;align-items:center;gap:10px;font-size:14.5px}
.il .q{color:var(--m-muted);font-size:13px;min-width:58px}.il .n{flex:1}
.tag{font-size:12px;padding:3px 8px;border-radius:6px;background:var(--m-field);border:1.5px solid transparent}
button.tag{cursor:pointer}
.tag.from{background:transparent;border:1.5px dotted var(--m-muted)}
.tag.mineT{background:var(--you);color:#282A2C}
.take{font-size:12.5px;padding:4px 9px;border-radius:6px;border:1.5px solid var(--m-muted);background:transparent;color:var(--m-ink);cursor:pointer}
.take:hover{background:rgba(255,255,255,.25)}
.qbox{margin:6px 0 2px 68px;font-size:12.5px;color:var(--m-muted)}
.qbox q{font-style:italic;display:block;margin-bottom:6px}
.qbox .mini{font-size:12.5px;padding:4px 9px;border-radius:6px;border:0;background:var(--m-field);color:var(--m-ink);cursor:pointer;margin-right:6px}
.qbox .mini.ghost{background:transparent;border:1px solid var(--m-muted)}
.foot{font-size:12.5px;color:var(--m-muted);padding:10px 14px;border-top:1px solid var(--m-rule);line-height:1.45}
/* rove */
.map{position:relative;height:140px;background:#dfe6d6}.map svg{position:absolute;inset:0;width:100%;height:100%}
.pin{position:absolute;z-index:1;width:28px;height:28px;border-radius:50% 50% 50% 0;transform:rotate(-45deg);border:0;background:#fff;font-size:12px;cursor:pointer;box-shadow:0 1px 2px rgba(0,0,0,.2);display:grid;place-items:center;padding:0}
.pin span{transform:rotate(45deg)}.pin.sel{background:var(--rove)}
.pin1{left:23%;top:28%}.pin2{left:63%;top:44%}.pin3{left:43%;top:70%}
/* poll */
.poll{background:#E4C9DF;border-radius:6px;width:320px;max-width:calc(100vw - 88px);padding:12px 14px 10px;text-align:left;color:#28292A}
.poll .a{font-size:11.5px;letter-spacing:.05em;text-transform:uppercase;color:#705F6D;margin-bottom:4px}
.poll h3{margin:0 0 2px;font-size:16px;font-weight:600;color:#28292A}
.opt{position:relative;display:block;width:100%;min-height:68px;background:#F0DFEC;border:0;border-radius:4px;padding:0;margin:0;font-size:15px;cursor:pointer;text-align:left;overflow:hidden;color:#28292A}
.poll .opt+.opt{margin-top:8px}
.opt:hover,.opt:disabled{background:#F0DFEC}
.opt:disabled{opacity:1;cursor:default}
.opt .fill{position:absolute;left:0;top:0;bottom:0;width:0;pointer-events:none;z-index:0}
.slot-in{position:relative;z-index:1;display:block;padding:10px 12px 9px}
.slot-top{display:flex;align-items:center;justify-content:space-between;gap:8px}
.slot-label{font-size:15px;font-weight:500;line-height:1.25}
.slot-result{display:flex;align-items:center;gap:6px;font-variant-numeric:tabular-nums;flex:none}
.mark{font-size:14px;font-weight:500;min-width:12px}
.num{font-size:18px;font-weight:600;line-height:1}
.who-line{display:block;margin-top:6px;font-size:11px;line-height:1.35;color:#28292A}
.who-line strong{font-weight:600}
.poll .pn{font-size:12px;color:#705F6D;margin-top:8px}
.ans{font-size:14px;background:#F0DFEC;border-radius:6px;padding:8px 10px;margin-top:6px}
.rin{display:flex;gap:6px;margin-top:8px}.rin input{flex:1;min-width:0;font:inherit;font-size:15px;border:1px solid #D5BCCF;border-radius:6px;padding:7px 9px;background:#fff}
.photo{width:240px;height:160px;border-radius:6px;background:linear-gradient(160deg,#cfdde4 0 40%,#7d9673 40% 70%,#a9b48a 70%)}
/* sheet */
.scrim{position:absolute;inset:0;background:rgba(233,234,235,.6);z-index:4}
.sheet{position:absolute;left:0;right:0;bottom:0;margin:0 auto;max-width:430px;max-height:88%;overflow:auto;overscroll-behavior:contain;background:var(--sheet);border-radius:6px 6px 0 0;box-shadow:0 -1px 0 var(--srule),0 -8px 24px rgba(40,42,44,.06);z-index:5;padding:6px 16px 18px}
.sh{display:flex;align-items:center;gap:6px;font-size:15px;font-weight:600;padding:8px 0 8px}
.sh .tt{flex:1}.sh .ap{font-weight:400}
.sh .ib{margin:-6px -8px -6px 0}
.gh{font-size:11.5px;letter-spacing:.05em;text-transform:uppercase;color:var(--muted);margin:14px 2px 4px}
.grp{border-top:1px solid var(--srule)}
.it{display:flex;align-items:center;gap:13px;width:100%;border:0;border-bottom:1px solid var(--srule);background:none;color:var(--text);text-align:left;padding:9px 2px;cursor:pointer;min-height:52px}
.it:hover{background:rgba(255,255,255,.55)}
.blk{width:32px;height:32px;border-radius:6px;display:grid;place-items:center;color:#282A2C;flex:none}
.tx{flex:1;display:flex;flex-direction:column}.l{font-size:15px}.s{font-size:12.5px;color:var(--muted);margin-top:1px}
.ap{font-size:12px;color:var(--muted)}
.sfoot{display:flex;align-items:center;gap:10px;margin-top:14px;font-size:12px;color:var(--muted)}
.help{display:inline-flex;align-items:center;gap:6px;font-size:13.5px;background:none;border:1px solid var(--srule);border-radius:6px;padding:7px 11px;cursor:pointer}
.fld{display:block;width:100%;font:inherit;font-size:16px;color:var(--text);background:#fff;border:1px solid var(--srule);border-radius:6px;padding:11px 12px;margin:6px 0}
.fld.big{font-size:17px;font-weight:500}
.seg{display:inline-flex;border:1px solid var(--srule);border-radius:6px;margin:8px 0 6px;overflow:hidden}
.seg button{font-size:13px;border:0;background:none;padding:7px 12px;color:var(--muted);cursor:pointer}
.seg [aria-pressed="true"]{background:var(--porch);color:#282A2C}
.add{font-size:13.5px;border:0;background:none;padding:6px 2px;cursor:pointer;text-decoration:underline;text-underline-offset:3px}
.post{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-top:12px;padding-top:12px;border-top:1px solid var(--srule)}
.snote{font-size:12.5px;color:var(--muted);line-height:1.45}
.pick{display:flex;align-items:center;gap:10px;width:100%;border:1px solid var(--srule);background:#fff;border-radius:6px;padding:10px 12px;margin:6px 0;text-align:left;cursor:pointer;font-size:15px}
.pick[aria-pressed="true"]{box-shadow:inset 0 0 0 1.5px #6C7073}
.pick small{display:block;font-size:12.5px;color:var(--muted)}
.chips{display:flex;flex-wrap:wrap;gap:6px;margin:6px 0}
.chipb{font-size:14px;border:1px solid var(--srule);background:#fff;border-radius:6px;padding:8px 11px;cursor:pointer}
.chipb[aria-pressed="true"]{background:var(--porch);border-color:var(--porch)}
.chk{display:flex;gap:10px;align-items:flex-start;padding:9px 2px;border-bottom:1px solid var(--srule);font-size:14px;cursor:pointer}
.chk input{margin-top:3px;width:16px;height:16px}
.chk small{display:block;color:var(--muted);font-size:12px}
.w0{width:0%}.w10{width:10%}.w20{width:20%}.w30{width:30%}.w40{width:40%}.w50{width:50%}.w60{width:60%}.w70{width:70%}.w80{width:80%}.w90{width:90%}.w100{width:100%}
/* plan a time */
.ib:disabled{opacity:.3;cursor:default}.ib:disabled:hover{background:none}
.tznote strong{color:var(--text);font-weight:600}
.calnav{display:flex;align-items:center;gap:4px;margin:2px 0 4px}
.calnav .ib{width:44px;height:44px}
.calmo{flex:1;text-align:center;font-size:15.5px;font-weight:600}
.cal{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:2px;margin:0 0 8px}
.dow{text-align:center;font-size:11px;letter-spacing:.04em;color:var(--muted);padding:3px 0}
.daypad,.dayb{height:44px}
.dayb{min-width:0;border:0;background:transparent;border-radius:6px;padding:0;font-size:14.5px;cursor:pointer}
@media (hover:hover) and (pointer:fine){.dayb:hover{background:rgba(40,42,44,.05)}}
.dayb[aria-pressed="true"]{background:var(--porch)}
.dayb.today{box-shadow:inset 0 0 0 1.5px #C49FBF}
.dayb.today[aria-pressed="true"]{box-shadow:none}
.dchips{display:flex;flex-direction:column;gap:6px}
.dchip{display:flex;align-items:center;gap:4px;background:#fff;border:1px solid var(--srule);border-radius:6px;padding:0 0 0 10px;min-height:44px}
.dchip .dl{flex:1;min-width:0;font-size:14.5px}
.tzbit{font-size:12px;color:var(--muted);flex:none}
.tsel{font:inherit;font-size:16px;line-height:1.2;border:0;background:transparent;color:var(--text);padding:8px 2px;max-width:118px}
.dchip .ib{width:44px;height:44px}
#tlimit:empty{display:none}#tlimit{margin-top:6px}
.poll.plan{width:320px}
.poll .tz{font-size:12.5px;font-weight:500;color:#5d4b59;margin:0 0 8px}
.lockbar{display:flex;align-items:center;flex-wrap:wrap;gap:2px 14px;margin-top:6px}
.lockbar .demo{flex-basis:100%;margin:0}
.lockacts{display:flex;align-items:center;gap:14px}
.lockacts .hint{font-size:12px;color:#5d4b59}
.hostlink{display:inline-block;margin:0;padding:2px 0;border:0;background:none;color:#5d4b59;font-size:12px;text-decoration:underline;text-underline-offset:3px;cursor:pointer;min-height:32px}
.hostlink.go{color:#28292A;font-weight:600}
.opt.pick-on .slot-in{box-shadow:inset 3px 0 0 #705F6D}
.finwrap{margin:0 0 14px 40px;max-width:calc(100% - 40px)}
.finwrap .card{width:100%;max-width:300px}
.planblock:has(.mine) .finwrap{margin-left:auto;max-width:min(300px,100%)}
.btn.c-places{background:var(--places)}.btn.c-kith{background:var(--kith)}.btn.c-rove{background:var(--rove)}.btn.c-porch{background:var(--porch)}.btn.c-mohn{background:var(--mohn)}.btn.done{background:var(--you)}.btn.ghost{background:transparent}
/* Decision bars. Same formula as the Sunday dinner card: t = yes / group, rgb(255-12t, 169+53t, 60+29t). Locked is #AED48A. */
.fill.f0-1{width:calc(100% * 0 / 1);background:rgb(255,169,60)}
.fill.f1-1{width:calc(100% * 1 / 1);background:rgb(243,222,89)}
.fill.f0-2{width:calc(100% * 0 / 2);background:rgb(255,169,60)}
.fill.f1-2{width:calc(100% * 1 / 2);background:rgb(249,196,75)}
.fill.f2-2{width:calc(100% * 2 / 2);background:rgb(243,222,89)}
.fill.f0-3{width:calc(100% * 0 / 3);background:rgb(255,169,60)}
.fill.f1-3{width:calc(100% * 1 / 3);background:rgb(251,187,70)}
.fill.f2-3{width:calc(100% * 2 / 3);background:rgb(247,204,79)}
.fill.f3-3{width:calc(100% * 3 / 3);background:rgb(243,222,89)}
.fill.f0-4{width:calc(100% * 0 / 4);background:rgb(255,169,60)}
.fill.f1-4{width:calc(100% * 1 / 4);background:rgb(252,182,67)}
.fill.f2-4{width:calc(100% * 2 / 4);background:rgb(249,196,75)}
.fill.f3-4{width:calc(100% * 3 / 4);background:rgb(246,209,82)}
.fill.f4-4{width:calc(100% * 4 / 4);background:rgb(243,222,89)}
.fill.f0-5{width:calc(100% * 0 / 5);background:rgb(255,169,60)}
.fill.f1-5{width:calc(100% * 1 / 5);background:rgb(253,180,66)}
.fill.f2-5{width:calc(100% * 2 / 5);background:rgb(250,190,72)}
.fill.f3-5{width:calc(100% * 3 / 5);background:rgb(248,201,77)}
.fill.f4-5{width:calc(100% * 4 / 5);background:rgb(245,211,83)}
.fill.f5-5{width:calc(100% * 5 / 5);background:rgb(243,222,89)}
.fill.f0-6{width:calc(100% * 0 / 6);background:rgb(255,169,60)}
.fill.f1-6{width:calc(100% * 1 / 6);background:rgb(253,178,65)}
.fill.f2-6{width:calc(100% * 2 / 6);background:rgb(251,187,70)}
.fill.f3-6{width:calc(100% * 3 / 6);background:rgb(249,196,75)}
.fill.f4-6{width:calc(100% * 4 / 6);background:rgb(247,204,79)}
.fill.f5-6{width:calc(100% * 5 / 6);background:rgb(245,213,84)}
.fill.f6-6{width:calc(100% * 6 / 6);background:rgb(243,222,89)}
.fill.f0-7{width:calc(100% * 0 / 7);background:rgb(255,169,60)}
.fill.f1-7{width:calc(100% * 1 / 7);background:rgb(253,177,64)}
.fill.f2-7{width:calc(100% * 2 / 7);background:rgb(252,184,68)}
.fill.f3-7{width:calc(100% * 3 / 7);background:rgb(250,192,72)}
.fill.f4-7{width:calc(100% * 4 / 7);background:rgb(248,199,77)}
.fill.f5-7{width:calc(100% * 5 / 7);background:rgb(246,207,81)}
.fill.f6-7{width:calc(100% * 6 / 7);background:rgb(245,214,85)}
.fill.f7-7{width:calc(100% * 7 / 7);background:rgb(243,222,89)}
.fill.f0-8{width:calc(100% * 0 / 8);background:rgb(255,169,60)}
.fill.f1-8{width:calc(100% * 1 / 8);background:rgb(254,176,64)}
.fill.f2-8{width:calc(100% * 2 / 8);background:rgb(252,182,67)}
.fill.f3-8{width:calc(100% * 3 / 8);background:rgb(251,189,71)}
.fill.f4-8{width:calc(100% * 4 / 8);background:rgb(249,196,75)}
.fill.f5-8{width:calc(100% * 5 / 8);background:rgb(248,202,78)}
.fill.f6-8{width:calc(100% * 6 / 8);background:rgb(246,209,82)}
.fill.f7-8{width:calc(100% * 7 / 8);background:rgb(245,215,85)}
.fill.f8-8{width:calc(100% * 8 / 8);background:rgb(243,222,89)}
.fill.locked{width:100%;background:#AED48A}