.rank-tier--iron{--rank-colour:var(--jumigo-rank-iron)}.rank-tier--bronze{--rank-colour:var(--jumigo-rank-bronze)}.rank-tier--gold{--rank-colour:var(--jumigo-rank-gold)}.rank-tier--platinum{--rank-colour:var(--jumigo-rank-platinum)}.rank-tier--emerald{--rank-colour:var(--jumigo-rank-emerald)}.rank-tier--diamond{--rank-colour:var(--jumigo-rank-diamond)}.rank-tier--champion{--rank-colour:var(--jumigo-rank-champion)}.rank-medal{filter:drop-shadow(0 2px 2px #3c230f59);flex:none;width:1em;height:1.125em;display:block;overflow:visible}.rank-medal--gem{filter:drop-shadow(0 .04em .05em #28190a59);width:1.2em;height:1.2em;position:relative}.rank-medal__art{object-fit:contain;-webkit-user-select:none;user-select:none;-webkit-user-drag:none;width:100%;height:100%;display:block}.rank-medal__division{border:max(1px, .012em) solid color-mix(in srgb, var(--rank-colour) 70%, #3a2410);color:#33210f;min-width:1.6em;font-family:var(--jumigo-font-display);text-align:center;background:#fffaf2;border-radius:999px;padding:.05em .35em;font-size:max(.42rem,.15em);font-weight:900;line-height:1.1;position:absolute;bottom:4%;left:50%;transform:translate(-50%);box-shadow:0 1px 2px #28190a4d}.rank-medal__tail{fill:color-mix(in srgb, var(--rank-colour) 72%, #3a2410)}.rank-medal__petals{fill:var(--rank-colour)}.rank-medal__face{fill:color-mix(in srgb, var(--rank-colour) 62%, #fff)}.rank-medal__stitch{fill:none;stroke:color-mix(in srgb, var(--rank-colour) 55%, #3a2410);stroke-dasharray:2.4 2.4;stroke-width:1.2px}.rank-medal__mark{fill:#33210f;font-family:var(--jumigo-font-display);text-anchor:middle;font-size:19px;font-weight:900}.rank-heading{grid-template-columns:auto minmax(0,1fr);align-items:center;column-gap:clamp(.6rem,1.5vw,1rem);display:grid;position:relative}.rank-heading>.rank-medal{font-size:clamp(4rem,12vh,6.5rem)}.rank-heading__name{color:var(--jumigo-ink-strong);font-family:var(--jumigo-font-display);letter-spacing:-.03em;white-space:nowrap;margin:0;font-size:clamp(2rem,6vh,3.5rem);font-weight:900;line-height:1}.rank-heading__sub{color:var(--jumigo-ink-muted);margin:.1rem 0 0;font-size:.85rem;font-weight:700}.rank-heading__progress{margin-top:.45rem}.rank-heading__track{border-radius:var(--jumigo-radius-pill);background:var(--jumigo-paper-meter-track);height:.7rem;overflow:hidden;box-shadow:inset 0 1px 2px #3c230f40}.rank-heading__fill{border-radius:inherit;background:var(--rank-colour);height:100%;transition:width .4s cubic-bezier(.16,1,.3,1);display:block}.rank-heading__points{color:var(--jumigo-ink-muted);font-variant-numeric:tabular-nums;justify-content:space-between;gap:.5rem;margin:.2rem 0 0;font-size:.75rem;font-weight:800;display:flex}.rank-stamp{font-family:var(--jumigo-font-display);font-variant-numeric:tabular-nums;border:2.5px solid;border-radius:.5rem;justify-items:center;padding:.1rem .55rem;font-size:clamp(1.3rem,3.6vh,1.8rem);font-weight:900;line-height:1.05;animation:.38s cubic-bezier(.16,1,.3,1) both rank-stamp-in;display:grid;position:absolute;top:-.35rem;right:0;transform:rotate(-7deg)}.rank-stamp small{font-family:var(--jumigo-font-body);font-size:.58rem;font-weight:800}.rank-stamp.is-up{color:color-mix(in srgb, var(--jumigo-ok) 82%, var(--jumigo-ink-strong))}.rank-stamp.is-down{color:color-mix(in srgb, var(--jumigo-wrong) 82%, var(--jumigo-ink-strong))}@keyframes rank-stamp-in{0%{opacity:0;transform:rotate(-16deg)scale(2)}}.rank-pill{border:1.5px dashed var(--rank-colour);border-radius:var(--jumigo-radius-pill);background:var(--jumigo-paper-cream);color:var(--jumigo-ink-strong);white-space:nowrap;flex:none;align-items:center;gap:.35rem;padding:.2rem .6rem;font-size:.78rem;font-weight:800;display:inline-flex}.rank-pill .rank-medal{filter:none;font-size:1.05rem}.rank-pill:has(.rank-pill__cefr){padding-block:0;padding-right:0;overflow:hidden}.rank-pill__cefr{border-left:1.5px solid var(--rank-colour);background:color-mix(in srgb, var(--rank-colour) 28%, #fff8ee);color:#2b2118;align-self:stretch;place-items:center;min-width:3.3rem;margin-left:.2rem;padding:0 .45rem;font-size:.72rem;font-weight:800;line-height:1;display:grid}.rank-pill--unranked{--rank-colour:color-mix(in srgb, var(--jumigo-ink-strong) 30%, #fff8ee)}.rank-pill--unranked.is-locked{cursor:not-allowed}.rank-pill--unranked.is-locked .rank-pill__name{opacity:.6}.rank-pill__lock{width:1.05rem;height:1.05rem;color:var(--jumigo-ink-strong);stroke-width:2.6px;flex:none}.rank-medal__mark--unknown{font-size:34px}.rank-pill--unranked.is-ready{--rank-colour:var(--jumigo-rank-gold);animation:2.4s ease-in-out infinite rank-pill-ready}@keyframes rank-pill-ready{50%{box-shadow:0 0 0 4px color-mix(in srgb, var(--rank-colour) 35%, transparent)}}.rank-up{z-index:60;cursor:pointer;background:#0a0e1ed1;place-items:center;display:grid;position:fixed;inset:0;overflow:hidden}.rank-up__card{text-align:center;justify-items:center;gap:.35rem;padding:1.5rem;animation:.6s cubic-bezier(.2,1.4,.4,1) both rank-up-land;display:grid}.rank-up__kicker{color:#fff;letter-spacing:.12em;text-transform:uppercase;margin:0;font-size:1rem;font-weight:900}.rank-up__medal{margin:.5rem 0;font-size:clamp(7rem,26vh,12rem)}.rank-up__name{color:var(--rank-colour);font-family:var(--jumigo-font-display);margin:0;font-size:clamp(2.6rem,9vh,5rem);font-weight:900;line-height:1}.rank-up__sub{color:#fffc;margin:0 0 1rem;font-size:.95rem;font-weight:700}.rank-up__confetti span{top:-5vh;left:calc(3% + var(--i) * 5.4%);background:var(--jumigo-confetti-1);width:.7rem;height:1rem;animation:rank-up-fall 2.4s ease-in calc(var(--i) * 70ms) forwards;position:absolute}.rank-up__confetti span:nth-child(3n){background:var(--jumigo-confetti-3)}.rank-up__confetti span:nth-child(3n+1){background:var(--jumigo-lantern)}@keyframes rank-up-land{0%{opacity:0;transform:scale(.6)}to{opacity:1;transform:scale(1)}}@keyframes rank-up-fall{to{transform:translateY(110vh)rotate(540deg)}}@media (width<=480px){.rank-heading>.rank-medal{font-size:4rem}.rank-heading__name{font-size:1.6rem}.rank-stamp{padding:0 .4rem;font-size:1.05rem;top:1.55rem}.rank-stamp small{display:none}}@media (prefers-reduced-motion:reduce){.rank-up__card{animation:none}.rank-up__confetti{display:none}.rank-heading__fill{transition:none}.rank-stamp,.rank-pill--unranked.is-ready{animation:none}}.rank-explainer{border:var(--jumigo-border-dashed-width) dashed var(--jumigo-border-dashed);border-radius:var(--jumigo-radius-tag);background:var(--jumigo-paper-surface);width:min(20rem,100vw - 2rem);box-shadow:var(--jumigo-shadow-paper);color:var(--jumigo-ink-strong);gap:.5rem;font-size:.85rem;line-height:1.45;display:grid}.rank-explainer__title{font-family:var(--font-display,inherit);font-size:1.05rem;font-weight:800}.rank-explainer__how{font-weight:700}.rank-explainer__label,.rank-explainer__muted{color:var(--jumigo-ink-muted);font-size:.78rem}.rank-explainer__actions{justify-content:flex-end;align-items:center;gap:.5rem;margin-top:.25rem;display:flex}.rank-arrows{flex:none;width:1rem;height:1.25rem;overflow:visible}.rank-arrows path{fill:none;stroke:var(--jumigo-rank-up);stroke-width:3.2px;stroke-linecap:round;stroke-linejoin:round;opacity:.35;animation:1.6s ease-in-out infinite rank-arrow-light}.rank-arrows__high{animation-delay:.35s!important}@keyframes rank-arrow-light{0%,15%{opacity:.35;filter:none}35%,60%{opacity:1;filter:drop-shadow(0 0 3px var(--jumigo-rank-up))}to{opacity:.35;filter:none}}.rank-pill.is-climbable{animation:2.4s ease-in-out infinite rank-pill-climb}@keyframes rank-pill-climb{50%{box-shadow:0 0 0 4px color-mix(in srgb, var(--jumigo-rank-up) 35%, transparent)}}.rank-pill:is(button){cursor:pointer;font-family:inherit}.rank-card__arrows path{stroke:currentColor}.rank-card__go{align-items:center;gap:.4rem;display:inline-flex}.rank-ladder{margin:0;padding:.25rem 0;list-style:none;display:grid}.rank-ladder__step{border-radius:var(--jumigo-radius-pill);grid-template-columns:1.9rem 1fr auto;align-items:center;gap:.55rem;min-height:1.95rem;padding:0 .5rem 0 .25rem;font-size:.82rem;font-weight:800;display:grid;position:relative}.rank-ladder__step:not(:first-child):before{content:"";background:color-mix(in srgb, var(--jumigo-ink-strong) 18%, transparent);border-radius:2px;width:2px;height:1.1rem;position:absolute;top:-.55rem;left:calc(1.2rem - 1px)}.rank-ladder__step.is-reached:not(:first-child):before,.rank-ladder__step.is-current:not(:first-child):before{background:color-mix(in srgb, var(--jumigo-ink-strong) 18%, transparent)}.rank-ladder__node{z-index:1;place-items:center;display:grid;position:relative}.rank-ladder__medal{font-size:1.35rem}.rank-ladder__step.is-ahead{color:var(--jumigo-ink-muted)}.rank-ladder__step.is-ahead .rank-ladder__medal{opacity:.45;filter:grayscale(.9)}.rank-ladder__step.is-current{background:color-mix(in srgb, var(--rank-colour) 22%, transparent);box-shadow:inset 0 0 0 1.5px var(--rank-colour)}.rank-ladder__here{color:var(--jumigo-ink-strong);letter-spacing:.04em;text-transform:uppercase;font-size:.66rem;font-weight:900}.rank-card{width:min(21rem,100vw - 1.5rem)}.rank-card__head{align-items:center;gap:.75rem;display:flex}.rank-card__medal{flex:none;font-size:3.2rem}.rank-card__name{color:var(--jumigo-ink-strong);font-family:var(--jumigo-font-display,inherit);margin:0;font-size:1.4rem;font-weight:900;line-height:1.1}.rank-card__points{color:var(--jumigo-ink-muted);justify-content:space-between;margin-top:.2rem;font-size:.75rem;font-weight:800;display:flex}.rank-card__idle{color:var(--jumigo-ink-muted);text-align:center;margin:0;font-size:.8rem;font-weight:700}.rank-card>.rank-card__go{justify-content:center;width:100%}@media (prefers-reduced-motion:reduce){.rank-arrows path{opacity:1;animation:none}.rank-pill.is-climbable{animation:none}}.stage-rank-nudge{border:1.5px dashed var(--jumigo-rank-gold);border-radius:var(--jumigo-radius-tag);background:color-mix(in srgb, var(--jumigo-rank-gold) 16%, var(--jumigo-paper-surface));color:var(--jumigo-ink-strong);align-items:center;gap:.7rem;padding:.6rem .85rem;text-decoration:none;animation:2.4s ease-in-out infinite rank-pill-ready;display:flex}.stage-rank-nudge__arrows{width:1.4rem;height:1.75rem}@media (prefers-reduced-motion:reduce){.stage-rank-nudge{animation:none}}.rank-card__foundation{flex-wrap:wrap;align-items:baseline;gap:.3rem;font-size:.8rem;font-weight:700;display:flex}.rank-card__foundation-up{color:var(--jumigo-ok);font-weight:900}.rank-card__foundation-down{color:var(--jumigo-wrong);font-weight:900}.lesson-rank{border:1.5px dashed var(--rank-colour);border-radius:var(--jumigo-radius-tag);background:color-mix(in srgb, var(--rank-colour) 12%, var(--jumigo-paper-surface));color:var(--jumigo-ink-strong);text-align:left;gap:.35rem;padding:.65rem .85rem;display:grid}.lesson-rank__head{align-items:center;gap:.5rem;display:flex}.lesson-rank__medal{font-size:1.6rem}.lesson-rank__name{flex-wrap:wrap;align-items:baseline;gap:.4rem;min-width:0;font-weight:900;display:flex}.lesson-rank__up{color:var(--jumigo-ink-muted);font-size:.75rem;font-weight:800}.lesson-rank__change{align-items:center;gap:.25rem;margin-left:auto;font-size:1.15rem;font-weight:900;display:inline-flex}.lesson-rank__change.is-up{color:color-mix(in srgb, var(--jumigo-ok) 82%, var(--jumigo-ink-strong))}.lesson-rank__change.is-down{color:color-mix(in srgb, var(--jumigo-wrong) 82%, var(--jumigo-ink-strong))}.lesson-rank__arrows{width:.9rem;height:1.1rem}.lesson-rank__track{border-radius:var(--jumigo-radius-pill);background:var(--jumigo-paper-meter-track);height:.75rem;position:relative;overflow:hidden;box-shadow:inset 0 1px 2px #3c230f40}.lesson-rank__ghost,.lesson-rank__fill{border-radius:inherit;position:absolute;inset:0 auto 0 0}.lesson-rank__ghost{background:color-mix(in srgb, var(--rank-colour) 40%, transparent)}.lesson-rank__fill{background:var(--rank-colour);transition:width .9s cubic-bezier(.16,1,.3,1)}.lesson-rank__points{color:var(--jumigo-ink-muted);justify-content:space-between;font-size:.75rem;font-weight:800;display:flex}.lesson-rank__line{font-size:.85rem;font-weight:700}@media (prefers-reduced-motion:reduce){.lesson-rank__fill{transition:none}}.stage-rank-hint{color:var(--jumigo-ink-strong);text-align:left;align-items:center;gap:.6rem;font-size:.85rem;font-weight:700;display:flex}.stage-rank-hint__arrows{width:1rem;height:1.25rem}.stage-rank-hint__arrows path{opacity:.6;animation:none}
