/* Profile page */
#profile{width:100%;max-width:1400px;margin:0 auto}
body.profile-view #test,body.profile-view #result,body.profile-view #config,body.profile-view footer .keys{display:none!important}
body.profile-view main{justify-content:flex-start;padding-top:1.2rem}
.pg-wrap{display:flex;flex-direction:column;gap:1.1rem;padding-bottom:3rem}
.pg-enter>*{opacity:0;animation:rise .55s cubic-bezier(.2,.8,.2,1) forwards}
.pg-enter>*:nth-child(1){animation-delay:0s}.pg-enter>*:nth-child(2){animation-delay:.07s}.pg-enter>*:nth-child(3){animation-delay:.14s}.pg-enter>*:nth-child(4){animation-delay:.21s}.pg-enter>*:nth-child(5){animation-delay:.28s}.pg-enter>*:nth-child(n+6){animation-delay:.34s}
.pg-card{background:var(--sub-alt-color);border-radius:.9rem;padding:1.2rem 1.4rem}
.pg-muted{color:var(--sub-color);font-size:.85rem}
.pg-note{color:var(--sub-color);font-size:.78rem;margin-top:-.4rem}
.pg-note.center,.center{text-align:center}
.pg-note b{color:var(--main-color);font-weight:500}
.center{display:flex;justify-content:center}
.grow{flex:1}
h3{font-weight:500}

/* header card */
.pg-head{display:grid;grid-template-columns:minmax(260px,1.2fr) auto repeat(3,minmax(0,1fr));gap:.4rem 1.6rem;align-items:center}
.pg-id{display:flex;gap:1rem;align-items:center;grid-column:1;grid-row:1}
.pg-name{font-size:1.9rem;font-weight:500;letter-spacing:-.01em;line-height:1.1}
.pg-id small{color:var(--sub-color)}
.av{width:4.6rem;height:4.6rem;border-radius:50%;display:grid;place-items:center;font-size:2rem;font-weight:500;color:#fff;flex:none;object-fit:cover;
  background:radial-gradient(circle at 30% 25%,hsl(var(--h) 70% 62%),hsl(var(--h) 65% 38%));box-shadow:0 0 0 3px var(--bg-color),0 0 0 5px color-mix(in srgb,var(--main-color) 55%,transparent)}
.pg-xp{grid-column:1;grid-row:2;display:grid;grid-template-columns:auto 1fr auto;gap:.6rem;align-items:center;font-size:.78rem;color:var(--sub-color)}
.pg-xp .lv{font-family:var(--font);color:var(--main-color);font-size:1rem}
.pg-xp .bar{height:.5rem;background:var(--bg-color)}
.pg-xp .bar i{width:var(--w);animation:grow 1.1s .3s cubic-bezier(.2,.8,.2,1) both;transform-origin:left;background:linear-gradient(90deg,var(--main-color),var(--caret-color))}
@keyframes grow{from{transform:scaleX(0)}to{transform:scaleX(1)}}
.pg-sep{grid-column:2;grid-row:1/3;width:3px;height:70%;background:var(--bg-color);border-radius:2px}
.pg-big{grid-row:1/3;display:flex;flex-direction:column;gap:.1rem}
.pg-big span{color:var(--sub-color);font-size:1.05rem}
.pg-big b{font-weight:500;font-size:clamp(1.6rem,3vw,2.3rem);font-family:var(--font);color:var(--text-color)}

/* personal best tiles */
.pg-tiles{display:grid;grid-template-columns:repeat(3,1fr);gap:1.1rem}
.pg-pbs{display:flex;align-items:stretch;padding:.9rem .6rem .9rem 1rem}
.pg-pbs-in{flex:1;display:grid;grid-template-columns:repeat(4,1fr);gap:.2rem}
.pg-pb{flex-direction:column;gap:.1rem;padding:.5rem .2rem;border-radius:.6rem;color:var(--text-color);align-items:center}
.pg-pb small{font-size:.72rem;color:var(--sub-color)}
.pg-pb b{font-family:var(--font);font-size:clamp(1.5rem,2.4vw,2.2rem);font-weight:400;color:var(--main-color);line-height:1.15}
.pg-pb span{color:var(--sub-color);font-size:.95rem}
.pg-pb:hover{background:var(--bg-color)}
.pg-kebab{flex-direction:column;justify-content:center;align-items:center;gap:3px;padding:.5rem .7rem;border-radius:.5rem}
.pg-kebab span{width:4px;height:4px;border-radius:50%;background:currentColor}
.pg-kebab:hover{background:var(--bg-color)}

/* heatmap */
.pg-heat-top{display:flex;align-items:center;gap:1rem;margin-bottom:.8rem;flex-wrap:wrap}
.pg-heat select{background:var(--bg-color);color:var(--text-color);border:2px solid color-mix(in srgb,var(--sub-color) 35%,transparent);border-radius:.5rem;padding:.55rem .8rem;font:inherit;font-weight:500;min-width:11rem}
.pg-scale{display:flex;align-items:center;gap:.25rem;color:var(--sub-color);font-size:.8rem}
.pg-scale i,.hc{display:block;border-radius:3px;background:var(--bg-color)}
.pg-scale i{width:.9rem;height:.9rem}
.l1{background:color-mix(in srgb,var(--main-color) 28%,var(--bg-color))!important}.l2{background:color-mix(in srgb,var(--main-color) 52%,var(--bg-color))!important}.l3{background:color-mix(in srgb,var(--main-color) 78%,var(--bg-color))!important}.l4{background:var(--main-color)!important}
.hm{display:grid;grid-template-columns:auto 1fr;gap:.6rem;--gap:3px}
.hm-days{display:grid;grid-template-rows:1.4rem repeat(7,1fr);font-size:.7rem;color:var(--sub-color)}
.hm-days::before{content:''}
.hm-days span{display:flex;align-items:center}
.hm-months{display:grid;grid-template-columns:repeat(var(--cols),1fr);gap:var(--gap);height:1.4rem;font-size:.7rem;color:var(--sub-color)}
.hm-months span{white-space:nowrap;overflow:visible}
.hm-grid{display:grid;grid-template-rows:repeat(7,auto);grid-auto-flow:column;grid-auto-columns:1fr;gap:var(--gap)}
.hc{width:100%;aspect-ratio:1;padding:0;border-radius:3px;min-width:6px;transition:transform .12s,outline-color .12s;outline:2px solid transparent}
.hc:hover{transform:scale(1.35);outline-color:var(--text-color);z-index:1;position:relative}
.hc.sel{outline-color:var(--caret-color);transform:scale(1.25)}
.hc.out{opacity:.25;cursor:default}
.hc.l0.out{opacity:.1}

/* filters */
.pg-filters{display:flex;flex-direction:column;gap:.6rem}
.pg-ftitle{display:flex;align-items:center;gap:.5rem;color:var(--sub-color)}
.pg-ftitle em{font-style:normal;background:var(--main-color);color:var(--bg-color);border-radius:.8rem;padding:0 .55rem;font-size:.7rem}
.pg-frow4{display:grid;grid-template-columns:repeat(4,1fr);gap:.6rem}
.pg-frow5{display:grid;grid-template-columns:repeat(5,1fr);gap:.6rem}
.pgb{justify-content:center;background:var(--sub-alt-color);color:var(--text-color);padding:.65rem 1rem;border-radius:.5rem;font-weight:500;font-size:.9rem;gap:.5rem;transition:background-color .15s,color .15s,transform .1s}
.pgb:hover{background:color-mix(in srgb,var(--sub-color) 28%,var(--sub-alt-color))}
.pgb:active{transform:scale(.98)}
.pgb.on,.pgb.on:hover{background:var(--main-color);color:var(--bg-color)}
.pgb.wide{width:100%;margin-top:.6rem}
.pg-adv{display:flex;flex-direction:column;gap:.55rem;background:var(--sub-alt-color);border-radius:.7rem;padding:.9rem 1rem}
.fg{display:flex;flex-wrap:wrap;gap:.35rem;align-items:center}
.fl{width:6.5rem;color:var(--sub-color);font-size:.78rem}
.chip{padding:.28rem .7rem;border-radius:999px;font-size:.78rem;background:var(--bg-color);color:var(--text-color)}
.chip:hover{background:color-mix(in srgb,var(--sub-color) 30%,var(--bg-color))}
.chip.on{background:var(--main-color);color:var(--bg-color)}
.pg-presets{display:flex;flex-wrap:wrap;gap:.4rem}
.preset{display:inline-flex}
.preset .chip:first-child{border-radius:999px 0 0 999px}.preset .chip.x{border-radius:0 999px 999px 0;padding:.28rem .5rem;color:var(--sub-color)}
.pg-dayflt{font-size:.85rem;color:var(--text-color);display:flex;gap:.6rem;align-items:center}

/* charts */
.pg-chart-h{display:flex;justify-content:space-between;gap:1rem;align-items:flex-start;flex-wrap:wrap;margin-bottom:.4rem}
.pg-chart-h h3{font-size:1.05rem}
.pg-chart-h small{color:var(--sub-color);font-size:.78rem}
.pg-chart-h small b{color:var(--main-color);font-weight:500}
.pg-ser{display:flex;gap:.35rem;flex-wrap:wrap}
.lgb.static{cursor:default;border-color:transparent;background:var(--bg-color)}
.pg-svgwrap{position:relative}
.pg-svg{width:100%;height:auto;display:block}
.pg-svg .gl{stroke:var(--sub-color);opacity:.2}
.pg-svg .ax{fill:var(--sub-color);font-size:11px;font-family:var(--font)}
.p-a10{fill:none;stroke:var(--main-color);stroke-width:3.4;stroke-linecap:round;stroke-linejoin:round;filter:drop-shadow(0 0 5px color-mix(in srgb,var(--main-color) 50%,transparent))}
.p-a100{fill:none;stroke:var(--text-color);stroke-width:2.2;opacity:.85}
.p-a100.dash{stroke-dasharray:3 6}
.p-acc{fill:none;stroke:var(--caret-color);stroke-width:1.6;stroke-dasharray:6 5;opacity:.65}
.pdot{fill:color-mix(in srgb,var(--main-color) 55%,var(--bg-color));opacity:.85;stroke:var(--sub-alt-color);stroke-width:1}
.pdot.big{fill:var(--bg-color);stroke:var(--main-color);stroke-width:2.4;opacity:1}
.hot{fill:var(--bg-color);stroke:var(--text-color);stroke-width:2.5}
.dbar{fill:color-mix(in srgb,var(--main-color) 70%,var(--sub-alt-color));transform-box:fill-box;transform-origin:bottom;animation:barup .7s cubic-bezier(.2,.8,.2,1) both}
.dbar:hover{fill:var(--main-color)}
.dline{stroke-dasharray:none}
@keyframes barup{from{transform:scaleY(0)}to{transform:scaleY(1)}}
.pg-svg.play .trev{transform-box:fill-box;transform-origin:left center;animation:rv 1.5s cubic-bezier(.45,.05,.2,1) both}
.pg-svg.play .pdot:not(.big){opacity:0;animation:popin .4s cubic-bezier(.3,1.6,.5,1) both}
.pg-tip{position:absolute;top:.2rem;min-width:170px;z-index:3}
.pg-tip .dim{color:var(--sub-color);font-size:.7rem;margin-top:.15rem}
.pg-slope{color:var(--sub-color);font-size:.85rem;text-align:center;margin-top:.3rem}
.pg-slope .up{color:var(--main-color);font-weight:500}.pg-slope .down{color:var(--error-color);font-weight:500}
.sw-pdot{background:color-mix(in srgb,var(--main-color) 55%,var(--bg-color));border-radius:50%!important;width:.6rem!important;height:.6rem!important;border:0!important}
.sw-acc{background:repeating-linear-gradient(90deg,var(--caret-color) 0 5px,transparent 5px 8px);height:.2rem!important;border:0!important}
.sw-a10{background:var(--main-color)}.sw-a100{background:var(--text-color);height:.2rem!important;border:0!important}
.sw-bar{background:color-mix(in srgb,var(--main-color) 70%,var(--sub-alt-color));width:.7rem!important;height:.8rem!important;border-radius:2px!important;border:0!important}
.pg-two{display:grid;grid-template-columns:3fr 2fr;gap:1.1rem}
.pg-two>.pg-chart:only-child{grid-column:1/-1}
.hist{display:grid;grid-template-columns:auto 1fr;gap:.6rem;height:210px}
.hist-y{display:flex;flex-direction:column;justify-content:space-between;font-size:.7rem;color:var(--sub-color);padding-bottom:1.3rem;text-align:right}
.hist-bars{display:flex;gap:4px;align-items:stretch;border-bottom:1px solid color-mix(in srgb,var(--sub-color) 30%,transparent)}
.hb{flex:1;display:flex;flex-direction:column;justify-content:flex-end;align-items:center;min-width:0}
.hb i{display:flex;justify-content:center;width:100%;height:var(--h);min-height:2px;background:var(--main-color);border-radius:4px 4px 0 0;transform-origin:bottom;animation:barup .8s var(--d) cubic-bezier(.2,.8,.2,1) both;position:relative;margin-bottom:1.3rem}
.hb i em{position:absolute;top:-1.15rem;font-style:normal;font-size:.7rem;color:var(--sub-color)}
.hb span{position:absolute;margin-top:.3rem;font-size:.62rem;color:var(--sub-color);white-space:nowrap}
.hb{position:relative}.hb span{bottom:0}
.hb:hover i{filter:brightness(1.2)}
.hours{display:grid;grid-template-columns:repeat(24,1fr);gap:3px;height:210px}
.hr{display:flex;flex-direction:column;justify-content:flex-end;align-items:center;font-size:.62rem;color:var(--sub-color);min-width:0}
.hrb{flex:1;width:100%;display:flex;align-items:flex-end;min-height:0}
.hr i{display:block;width:100%;height:var(--h);min-height:2px;background:color-mix(in srgb,var(--main-color) 55%,var(--sub-alt-color));border-radius:3px 3px 0 0;transform-origin:bottom;animation:barup .7s var(--d) cubic-bezier(.2,.8,.2,1) both}
.hr.top i{background:var(--caret-color)}
.hr span{height:1.3rem;display:flex;align-items:flex-end}

/* stats grid */
.pg-statsgrid{padding:.4rem 0}
.pg-words{display:flex;justify-content:center;align-items:baseline;gap:1rem;margin:.6rem 0 1.6rem;color:var(--sub-color)}
.pg-words b{font-family:var(--font);font-size:clamp(2rem,4vw,3rem);font-weight:500;color:var(--text-color)}
.sg-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.1rem 2rem}
.sg{display:flex;flex-direction:column}
.sg span{color:var(--sub-color);font-size:.95rem}
.sg b{font-family:var(--font);font-size:clamp(1.7rem,3vw,2.5rem);font-weight:500;color:var(--text-color);line-height:1.2}
.sg b em{font-style:normal;font-size:.7em;color:var(--sub-color);margin-left:.3rem}
.sg small{color:var(--sub-color);font-size:.72rem}
.sg:nth-child(-n+3) b{color:var(--main-color)}

/* table */
.pg-tbl-h{display:flex;align-items:center;gap:1rem;margin-bottom:.6rem}
.pg-tbl-h h3{font-size:1.05rem}
.pg-scroll{overflow-x:auto}
.pg-tbl{width:100%;border-collapse:separate;border-spacing:0 .35rem;font-size:.9rem;min-width:820px}
.pg-tbl th{font-weight:400;color:var(--sub-color);text-align:left;font-size:.75rem;padding:.2rem .8rem}
.pg-tbl th button{padding:.1rem .3rem;margin-left:-.3rem;font-size:inherit}
.pg-tbl th button.on{color:var(--main-color)}
.pg-tbl td{padding:.75rem .8rem;background:var(--sub-alt-color);font-weight:500;vertical-align:middle}
.pg-tbl tbody tr:nth-child(even) td{background:color-mix(in srgb,var(--sub-alt-color) 70%,var(--bg-color))}
.pg-tbl td:first-child{border-radius:.5rem 0 0 .5rem;width:2.4rem;padding-right:0}.pg-tbl td:last-child{border-radius:0 .5rem .5rem 0}
.pg-tbl td.hi{color:var(--main-color)}
.pg-tbl td.mono{font-family:var(--font);font-weight:400}
.pg-tbl td.dt{line-height:1.2;white-space:nowrap}
.pg-tbl small{display:block;color:var(--sub-color);font-weight:400;font-size:.72rem}
.crown{width:1.2rem;height:1.2rem;fill:var(--main-color);stroke:var(--main-color)}
.acts{white-space:nowrap}
.ib{padding:.3rem .4rem;border-radius:.4rem;color:var(--sub-color);font-size:1.05rem}
.ib .i{width:1.05rem;height:1.05rem}
.ib:hover{color:var(--text-color);background:var(--bg-color)}
.ib.on{color:var(--main-color)}
.ib.del.arm{color:var(--error-color);background:color-mix(in srgb,var(--error-color) 18%,transparent)}
.chip.tg{background:color-mix(in srgb,var(--main-color) 22%,var(--bg-color));margin-right:.25rem}
.pg-empty{text-align:center;color:var(--sub-color);padding:2rem 1rem}
.pg-empty.big{padding:4rem 1rem;font-size:1.1rem;line-height:2}

/* account dropdown */
.acct-wrap{position:relative}
#acctMenu{position:absolute;right:0;top:calc(100% + .4rem);z-index:40;background:var(--sub-alt-color);border-radius:.7rem;padding:.4rem;min-width:13rem;box-shadow:0 12px 34px rgb(0 0 0/.35);display:flex;flex-direction:column;animation:rise .18s both}
#acctMenu button{width:100%;justify-content:flex-start;padding:.55rem .8rem;border-radius:.45rem;color:var(--text-color);font-size:.88rem;font-weight:500}
#acctMenu button:hover,#acctMenu button:focus-visible{background:var(--bg-color);color:var(--main-color)}
#acctMenu hr{border:0;border-top:1px solid color-mix(in srgb,var(--sub-color) 25%,transparent);margin:.25rem .4rem}
.sharebox{display:flex;gap:.5rem}
.sharebox input{flex:1;min-width:0}
.hues{display:flex;gap:.5rem;flex-wrap:wrap;margin:.6rem 0}
.hues button{width:2rem;height:2rem;padding:0;border-radius:50%;background:radial-gradient(circle at 30% 25%,hsl(var(--h) 70% 62%),hsl(var(--h) 65% 38%));border:3px solid transparent}
.hues button.on{border-color:var(--text-color)}

@media (max-width:1000px){
  .pg-head{grid-template-columns:1fr 1fr 1fr}
  .pg-id{grid-column:1/-1;grid-row:auto}.pg-xp{grid-column:1/-1;grid-row:auto}.pg-sep{display:none}.pg-big{grid-row:auto}
  .pg-tiles{grid-template-columns:1fr}.pg-two{grid-template-columns:1fr}.sg-grid{grid-template-columns:1fr 1fr}
}
@media (max-width:640px){
  .pg-frow4,.pg-frow5{grid-template-columns:1fr 1fr}
  .sg-grid{grid-template-columns:1fr}.pg-head{grid-template-columns:1fr}
  .fl{width:100%}
}