.profile-connect{display:flex;text-decoration:none;color:var(--text)}
.login-wrap{display:grid;grid-template-columns:minmax(0,1.45fr) minmax(230px,.75fr);gap:18px;align-items:stretch;margin-top:20px}
.login-card{position:relative;padding:clamp(22px,4vw,38px);overflow:hidden}
.login-card:after{content:"";position:absolute;width:190px;height:190px;border-radius:50%;right:-70px;top:-90px;background:radial-gradient(circle,var(--purple) 0,transparent 70%);opacity:.18;pointer-events:none}
.login-mascot{font-size:42px;margin-bottom:13px}
.login-card h2{margin:0 0 8px;font-size:25px;letter-spacing:-.5px}
.login-copy,.login-footnote{max-width:520px;color:var(--muted);font-size:11px;line-height:1.75}
.steam-login{display:flex;width:max-content;margin:21px 0 8px;text-decoration:none}
.steam-mark{display:grid;place-items:center;flex:none;width:27px;height:27px;border-radius:9px;background:var(--purple);color:#fff;font-size:12px;font-weight:800}
.profile-connect .steam-mark{overflow:hidden;position:relative;padding:0}
.profile-connect #steam-account-avatar{display:block;width:100%;height:100%;object-fit:cover;border-radius:inherit}
.profile-connect #steam-account-fallback{display:grid;place-items:center;width:100%;height:100%}
.profile-connect #steam-account-avatar[hidden],.profile-connect #steam-account-fallback[hidden]{display:none!important}
.verified-box{display:flex;align-items:center;gap:10px;margin:22px 0;padding:13px;border:1px solid #8de0bb42;background:#8de0bb0d;border-radius:14px}
.verified-box>span:first-child{display:grid;place-items:center;width:28px;height:28px;background:#8de0bb22;color:var(--mint);border-radius:50%;font-weight:900}
.verified-box div{display:grid;gap:3px;min-width:0}.verified-box strong{font-size:11px}.verified-box small{font-size:9px;color:var(--muted)}
.verified-badge{margin-left:auto;padding:5px 7px;border-radius:99px;background:#8de0bb1c;color:var(--mint);font-size:8px;font-weight:800;letter-spacing:.06em}
.username-form{max-width:540px}.username-form .field-label{margin-top:12px}.username-form .connect-field input{font-size:11px}.field-hint{display:block;margin-top:8px;color:var(--muted);font-size:9px;line-height:1.6}
.login-footnote{margin-top:20px;font-size:9px}
.login-side{align-self:stretch;padding:23px;border:1px solid var(--line);border-radius:19px;background:var(--panel);box-shadow:var(--shadow)}
.login-side>.card-icon{font-size:27px}.login-side h3{margin:10px 0;font-size:16px}.login-side ol{padding-left:19px;color:var(--muted);font-size:10px;line-height:1.9}.login-side p{padding:11px;border-radius:12px;background:var(--bg);color:var(--muted);font-size:9px;line-height:1.65}
.custom-benchmark-card{position:relative;overflow:hidden}.custom-benchmark-card:before{content:"";position:absolute;right:-35px;bottom:-55px;width:135px;height:135px;border-radius:50%;background:var(--purple);opacity:.055;pointer-events:none}
.custom-benchmark-card .card-link{position:relative;z-index:1}.custom-benchmark-card .scenario-tags{min-height:36px}
.benchmark-card-ranks{display:flex;flex-wrap:nowrap;gap:5px;margin:0 0 12px}
.benchmark-card-ranks .rank-chip{flex:1;min-width:0;text-align:center;padding:5px 3px;font-size:clamp(6px,0.62vw,8px);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.benchmark-task{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:13px}.benchmark-task>div{display:grid;gap:4px;min-width:0}.benchmark-task strong{font-size:11px;overflow-wrap:anywhere}.benchmark-task small{font-size:9px;color:var(--muted);line-height:1.5}.benchmark-task .button{white-space:nowrap}
.scenario-lookup{align-items:center}.scenario-card-results{margin-top:10px}.scenario-card-actions{display:flex;flex-wrap:wrap;gap:12px;align-items:center}
.scenario-lookup #scenario-name{flex:1;min-width:min(250px,100%)}
.benchmark-toolbar{display:flex;justify-content:space-between;align-items:center;gap:12px;margin:18px 0 12px}.benchmark-toolbar>div{display:flex;flex-wrap:wrap;gap:7px}
.benchmark-summary{display:block;margin-bottom:18px}
.benchmark-overall,.benchmark-rule{min-height:115px;padding:18px;border:1px solid var(--line);border-radius:17px;background:var(--panel);box-shadow:var(--shadow)}
.benchmark-overall{display:flex;flex-direction:column;align-items:flex-start;justify-content:center;gap:8px}.benchmark-overall>strong{font-size:19px}.benchmark-overall small{color:var(--muted);font-size:9px;line-height:1.6}.overall-position{font-size:11px!important}
.benchmark-rule{display:flex;align-items:flex-start;gap:12px}.benchmark-rule .card-icon{font-size:22px}.benchmark-rule strong{font-size:12px}.benchmark-rule p{margin:6px 0;color:var(--muted);font-size:10px;line-height:1.55}.benchmark-rule small{color:var(--muted);font-size:9px;line-height:1.5}
.benchmark-groups{display:grid;gap:14px}.benchmark-group{padding:17px;border:1px solid var(--line);border-radius:18px;background:var(--panel);box-shadow:var(--shadow)}
.benchmark-group-head{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:0 2px 14px}.benchmark-group-head h2{font-size:16px;margin:3px 0 4px}.category-rank{display:grid;justify-items:end;gap:5px}.category-rank small{font-size:9px;color:var(--muted)}
.benchmark-task-list{display:grid;gap:10px}.benchmark-task-card{display:grid;grid-template-columns:minmax(210px,.88fr) minmax(300px,1.4fr);gap:16px;padding:14px;border:1px solid var(--line);border-radius:14px;background:var(--bg)}
.benchmark-task-info{min-width:0}.benchmark-task-info h3{font-size:12px;margin:8px 0 4px;overflow-wrap:anywhere}.benchmark-task-info>p{color:var(--muted);font-size:9px;margin:0 0 10px}.benchmark-task-info .card-top{align-items:center}.benchmark-task-info .pill{font-size:8px}.focus-cue{display:grid;gap:4px;margin:11px 0;padding:10px;border-radius:10px;background:var(--panel)}.focus-cue strong{font-size:8px;color:var(--purple);text-transform:uppercase;letter-spacing:.08em}.focus-cue span{font-size:9px;color:var(--muted);line-height:1.5}.benchmark-task-info .button{font-size:9px;padding:8px 10px}
.task-evidence{min-width:0;padding:12px;border:1px solid var(--line);border-radius:11px;background:var(--panel)}.task-rank-row{display:flex;justify-content:space-between;align-items:center;gap:8px}.coach-rank{display:inline-flex;align-items:center;gap:5px;padding:5px 9px;border:1px solid color-mix(in srgb,var(--rank-color,#aaa) 45%,transparent);border-radius:999px;color:var(--rank-color,#aaa);background:color-mix(in srgb,var(--rank-color,#aaa) 12%,transparent);font-size:10px;font-weight:800;white-space:nowrap}.coach-rank:before{content:"✦";font-size:9px}.coach-rank.unranked{--rank-color:var(--muted);font-weight:600}.task-rank-position{font-size:10px;font-weight:700}.task-rank-hint{display:block;margin-top:5px;color:var(--muted);font-size:8px}
.run-history-head{display:flex;justify-content:space-between;align-items:center;gap:8px;margin-top:10px;font-size:8px;color:var(--muted)}.run-history-head strong{font-size:8px;color:var(--mint);font-weight:700}.run-sparkline{display:block;width:100%;height:62px;margin:3px 0}.run-history-values{display:flex;justify-content:space-between;gap:5px}.run-history-values>span{display:grid;gap:3px}.run-history-values strong{font-size:8px}.run-history-values small{font-size:7px;color:var(--muted)}.run-history-empty,.evidence-empty,.task-rank-error{padding:12px 3px;color:var(--muted);font-size:9px;line-height:1.5}.task-rank-error{color:#ee919e}
.rank-ladder{display:flex;flex-wrap:wrap;gap:7px;margin:12px 0}.rank-chip{padding:7px 10px;border:1px solid var(--line);border-radius:99px;background:var(--bg);font-size:9px;font-weight:700}.rank-chip.kitten{color:#f1a57f}.rank-chip.scout{color:#f4d681}.rank-chip.tracker{color:#8cd8c0}.rank-chip.pouncer{color:#c5a7ff}.rank-chip.apex{color:#f3b7d8}
.score-bars{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(34px,1fr);align-items:end;gap:5px;min-height:132px;margin-top:13px;padding:8px 3px 0;border-bottom:1px solid var(--line);overflow-x:auto}.score-bar-column{height:100%;min-width:34px;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;gap:5px}.score-bar-value{max-width:100%;font-size:7px;color:var(--text);font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.score-bar{display:block;width:min(22px,70%);height:var(--bar-height);min-height:4px;border-radius:6px 6px 2px 2px;background:linear-gradient(180deg,var(--purple-2),var(--purple));box-shadow:0 0 12px #ff485422;transition:height .25s ease}.score-bar-column small{width:100%;font-size:7px;color:var(--muted);text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.score-scale-note{display:block;margin-top:8px;color:var(--muted);font-size:8px;line-height:1.5}.filters .filter-chip{font-weight:700}.filters .filter-chip:focus-visible{outline:2px solid var(--purple-2);outline-offset:2px}
@media(max-width:760px){.benchmark-summary{grid-template-columns:1fr}.benchmark-toolbar{align-items:stretch;flex-direction:column}.benchmark-toolbar .button{justify-content:center}.benchmark-task-card{grid-template-columns:1fr}.category-rank{justify-items:end}}
@media(max-width:760px){.login-wrap{grid-template-columns:1fr}.login-side{padding:19px}.benchmark-task{grid-template-columns:1fr}.benchmark-task .button{justify-content:center}}
/* EVXL-inspired Pawpath benchmark score table: raw score runs and independent rank gates. */
.benchmark-table-wrap{width:100%;overflow:auto;border:1px solid var(--line);border-radius:14px;background:var(--panel);scrollbar-color:var(--muted-2) var(--panel-2)}
.benchmark-table{min-width:1160px}
.benchmark-table-head,.benchmark-table-row{display:grid;grid-template-columns:minmax(240px,1.2fr) 104px minmax(300px,1.45fr) minmax(420px,2fr);align-items:stretch}
.benchmark-table-head{position:sticky;top:0;z-index:2;background:var(--panel-3);color:var(--muted);font-size:9px;font-weight:900;letter-spacing:.08em}
.benchmark-table-head>span{padding:11px 12px;border-bottom:1px solid var(--line)}
.benchmark-table-row{min-height:88px;border-bottom:1px solid var(--line);background:var(--panel);transition:background .15s}
.benchmark-table-row:last-child{border-bottom:0}.benchmark-table-row:hover{background:var(--panel-2)}
.benchmark-table-row>div{min-width:0;padding:10px 12px;border-right:1px solid color-mix(in srgb,var(--line) 60%,transparent)}.benchmark-table-row>div:last-child{border-right:0}
.benchmark-row-scenario{display:flex;flex-direction:column;align-items:flex-start;gap:5px}.benchmark-row-scenario>.pill{font-size:8px}.benchmark-row-scenario>strong{font-size:11px;line-height:1.35;overflow-wrap:anywhere}.benchmark-row-scenario>small{font-size:9px;color:var(--muted);line-height:1.4}.benchmark-row-scenario .focus-cue{font-size:9px;color:var(--muted);line-height:1.4}.benchmark-row-scenario .focus-cue b{color:var(--purple)}.benchmark-row-scenario .button{margin-top:3px;padding:6px 9px;font-size:9px}
.benchmark-row-best{display:flex;flex-direction:column;justify-content:center;align-items:center;gap:3px;text-align:center}.benchmark-row-best strong{font-size:14px;color:var(--text);font-variant-numeric:tabular-nums}.benchmark-row-best small{font-size:8px;color:var(--muted)}
.benchmark-row-history{display:flex;flex-direction:column;justify-content:center;gap:6px;min-width:0}.evxl-run-head{display:flex;justify-content:space-between;gap:8px;color:var(--muted);font-size:8px;font-weight:800;letter-spacing:.05em}.evxl-run-head strong{color:var(--mint);font-size:9px;letter-spacing:0}.evxl-run-strip{display:flex;gap:4px;overflow-x:auto;padding:1px 0 5px;scrollbar-width:thin}.evxl-run-cell{position:relative;isolation:isolate;display:flex;flex:0 0 64px;height:31px;align-items:center;justify-content:center;overflow:hidden;border:1px solid var(--line);border-radius:6px;background:var(--panel-2);font-variant-numeric:tabular-nums}.evxl-run-cell i{position:absolute;z-index:-1;inset:0 auto 0 0;width:var(--run-fill);background:linear-gradient(90deg,#ff4854bb,#ff9560aa);border-right:1px solid #ff485488}.evxl-run-cell b{font-size:9px;color:var(--text);text-shadow:0 1px 3px var(--bg)}.evxl-run-cell small{position:absolute;right:3px;bottom:1px;color:var(--muted);font-size:6px}.evxl-run-note{font-size:8px;color:var(--muted-2)}
.benchmark-row-ranks{display:flex;flex-direction:column;justify-content:center;gap:7px;min-width:0}.evxl-rank-summary{display:flex;align-items:center;gap:9px;flex-wrap:wrap}.evxl-rank-summary .coach-rank{font-size:10px}.evxl-rank-summary>span:not(.coach-rank){font-size:9px;color:var(--muted)}.evxl-rank-summary>small{margin-left:auto;font-size:8px;color:var(--muted)}.evxl-rank-gates{display:grid;grid-template-columns:repeat(5,minmax(66px,1fr));gap:4px}.evxl-rank-cell{position:relative;isolation:isolate;display:flex;flex-direction:column;justify-content:center;gap:2px;min-height:34px;padding:4px 6px;overflow:hidden;border:1px solid var(--line);border-radius:6px;background:var(--bg);color:var(--muted-2)}.evxl-rank-cell b,.evxl-rank-cell small{position:relative;z-index:1}.evxl-rank-cell b{font-size:8px;color:var(--muted)}.evxl-rank-cell small{font-size:7px}.evxl-rank-cell i{position:absolute;z-index:-1;inset:0 auto 0 0;width:0;transition:width .25s}.evxl-rank-cell:nth-child(1){--gate-color:#ffbd91}.evxl-rank-cell:nth-child(2){--gate-color:#f5d78c}.evxl-rank-cell:nth-child(3){--gate-color:#9ee4c7}.evxl-rank-cell:nth-child(4){--gate-color:#9b78e7}.evxl-rank-cell:nth-child(5){--gate-color:#ef9cae}.evxl-rank-cell.is-passed{border-color:color-mix(in srgb,var(--gate-color) 45%,var(--line));color:var(--text)}.evxl-rank-cell.is-passed i{width:100%;background:color-mix(in srgb,var(--gate-color) 78%,transparent)}.evxl-rank-cell.is-current{box-shadow:inset 0 0 0 1px var(--gate-color)}.evxl-rank-cell.is-current b{color:#241a32}.task-rank-error{font-size:9px;color:var(--muted)}
.benchmark-score-goal{padding:10px 11px;margin-bottom:9px;border:1px solid var(--line);border-radius:10px;background:var(--bg)}.benchmark-score-heading{display:grid;grid-template-columns:auto 1fr;align-items:baseline;gap:3px 10px}.benchmark-score-heading>span{font-size:7px;font-weight:900;letter-spacing:.08em;color:var(--muted)}.benchmark-score-heading>b{font-size:18px;font-variant-numeric:tabular-nums;line-height:1.2}.benchmark-score-heading>small{grid-column:1/-1;color:var(--purple);font-size:8px;font-weight:800}.benchmark-score-progress{height:7px;margin:9px 0 5px;overflow:hidden;border-radius:99px;background:var(--panel-3)}.benchmark-score-progress>i{display:block;width:var(--score-progress);height:100%;border-radius:inherit;background:linear-gradient(90deg,var(--purple-2),var(--mint));transition:width .25s ease}.benchmark-score-target{display:flex;justify-content:space-between;gap:8px;align-items:baseline;color:var(--muted);font-size:8px}.benchmark-score-target strong{color:var(--text);text-align:right;font-variant-numeric:tabular-nums}.evxl-rank-cell em{position:relative;z-index:1;color:var(--text);font-size:8px;font-style:normal;font-weight:900;font-variant-numeric:tabular-nums}.evxl-rank-cell.is-next{border-color:var(--purple);box-shadow:inset 0 0 0 1px var(--purple)}
.evxl-score-line{display:grid;grid-template-columns:100px minmax(0,1fr);align-items:stretch;gap:7px;min-width:0}.evxl-player-score{display:flex;flex-direction:column;justify-content:center;gap:3px;padding:8px 10px;border:1px solid var(--line);border-radius:8px;background:var(--panel-2);font-variant-numeric:tabular-nums}.evxl-player-score>span{font-size:7px;color:var(--muted);font-weight:900;letter-spacing:.07em}.evxl-player-score>strong{font-size:15px;color:var(--mint);line-height:1.25;overflow-wrap:anywhere}.evxl-score-ladder{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:4px;min-width:0}.evxl-score-tier{position:relative;display:flex;min-width:0;min-height:62px;flex-direction:column;justify-content:center;gap:3px;padding:6px 5px 6px 9px;overflow:hidden;border:1px solid var(--line);border-radius:7px;background:var(--bg);font-variant-numeric:tabular-nums}.evxl-score-tier>b,.evxl-score-tier>small,.evxl-score-tier>strong{color:#fff;text-shadow:0 1px 2px #17131de8,0 0 4px #17131dcc;-webkit-text-stroke:.15px #17131d}.evxl-score-tier>b{font-size:8px;font-weight:800;white-space:nowrap}.evxl-score-tier>small{font-size:7px;font-weight:650;white-space:nowrap}.evxl-score-tier>strong{font-size:11px;font-weight:850;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.evxl-score-tier:nth-child(1){--tier-color:#f1a57f}.evxl-score-tier:nth-child(2){--tier-color:#f4d681}.evxl-score-tier:nth-child(3){--tier-color:#8cd8c0}.evxl-score-tier:nth-child(4){--tier-color:#c5a7ff}.evxl-score-tier:nth-child(5){--tier-color:#f3b7d8}.evxl-score-tier.is-reached{border-color:color-mix(in srgb,var(--tier-color,var(--muted)) 48%,var(--line));background:color-mix(in srgb,var(--tier-color,var(--muted)) 14%,var(--bg))}.evxl-score-tier.is-current{box-shadow:inset 0 0 0 1px var(--tier-color,var(--purple))}
@media(max-width:1100px){.evxl-score-line{grid-template-columns:86px minmax(0,1fr);gap:5px}.evxl-score-tier{padding-left:8px}.evxl-score-tier>b{font-size:7px}.evxl-score-tier>strong{font-size:9px}}
@media(max-width:520px){.evxl-score-line{grid-template-columns:minmax(90px,.8fr) minmax(0,1.2fr)}.evxl-score-ladder{grid-column:1/-1}.evxl-score-tier{min-height:56px}}
.evxl-score-tier{isolation:isolate}.evxl-score-tier:before{content:"";position:absolute;z-index:0;inset:0 auto 0 0;width:var(--tier-fill,0%);border-radius:inherit;background:linear-gradient(90deg,color-mix(in srgb,var(--tier-color,var(--purple)) 88%,white),color-mix(in srgb,var(--tier-color,var(--purple)) 68%,transparent));transition:width .25s ease}.evxl-score-tier>b,.evxl-score-tier>small,.evxl-score-tier>strong{position:relative;z-index:1}.evxl-score-tier.is-reached{background:var(--bg)}
.score-fetch-note{font-size:7px;color:var(--muted);line-height:1.35}
@media(max-width:700px){.benchmark-table{min-width:1160px}.benchmark-table-wrap{margin-right:-4px}.benchmark-table-head{font-size:8px}}
@media(min-width:701px) and (max-width:1400px){.benchmark-table{min-width:0}.benchmark-table-head,.benchmark-table-row{grid-template-columns:minmax(180px,1fr) 72px minmax(140px,.85fr) minmax(265px,1.5fr)}.evxl-rank-gates{grid-template-columns:repeat(5,minmax(0,1fr));gap:3px}.evxl-rank-cell{padding:4px 3px}.benchmark-table-row>div{padding:9px 8px}}

/* Keep benchmark title and score refresh controls available during long task lists. */
.benchmark-sticky-wrap{position:sticky;top:69px;z-index:4;margin:-32px -42px 18px;padding:22px 42px 1px;background:var(--bg);border-bottom:1px solid var(--line);box-shadow:0 8px 18px color-mix(in srgb,var(--bg) 82%,transparent)}
.benchmark-sticky-wrap .content-header{margin-bottom:14px}
.benchmark-sticky-wrap .benchmark-toolbar{margin:0 0 12px}
@media(max-width:1100px){.benchmark-sticky-wrap{margin-left:-28px;margin-right:-28px;padding-left:28px;padding-right:28px}}
@media(max-width:800px){.benchmark-sticky-wrap{top:60px;margin:-24px -18px 16px;padding:16px 18px 1px}.benchmark-sticky-wrap .content-header{margin-bottom:11px}.benchmark-sticky-wrap .benchmark-toolbar{margin-bottom:9px}}

/* Percentile-based grades for individual lessons. */
.lesson-grade-row{grid-template-columns:minmax(150px,.8fr) minmax(230px,1.5fr) 74px}
.lesson-grade-title,.lesson-grade-meter{display:grid;gap:4px;min-width:0}
.lesson-grade-title strong{font-size:11px}.lesson-grade-title small,.lesson-grade-meter small{font-size:9px;color:var(--muted);line-height:1.45;overflow-wrap:anywhere}
.lesson-grade-meter .progress-line{margin:2px 0 3px}.lesson-grade-badge{justify-self:end;min-width:48px;padding:7px 10px;border-radius:12px;text-align:center;font-size:15px;font-weight:900;background:var(--panel-3);color:var(--muted)}
.lesson-grade-badge.grade-f{background:#ed8a7b22;color:#ef9585}.lesson-grade-badge.grade-d{background:#efbd7822;color:#f0c27f}.lesson-grade-badge.grade-c{background:#e5d87a22;color:#e6d77c}.lesson-grade-badge.grade-b{background:#8dd9bf22;color:#8dd9bf}.lesson-grade-badge.grade-a{background:#8dc9ee22;color:#8dc9ee}.lesson-grade-badge.grade-aplus{background:#ff485426;color:var(--purple)}.lesson-grade-badge.grade-pending{font-size:12px}
.lesson-grades-card .section-head .button:disabled{opacity:.58;cursor:wait}
@media(max-width:760px){.lesson-grade-row{grid-template-columns:minmax(0,1fr) auto;gap:8px 12px}.lesson-grade-meter{grid-column:1;grid-row:2}.lesson-grade-badge{grid-column:2;grid-row:1/3;align-self:center}}

.lesson-grade-row{cursor:pointer;transition:border-color .16s,transform .16s,background-color .16s}
.lesson-grade-row:hover{border-color:var(--purple-2);transform:translateY(-1px)}
.lesson-grade-row:focus-visible{outline:2px solid var(--purple);outline-offset:2px}

/* Learn combines the old Progress grades with each lesson mechanic card. */
.learn-progress-tools{display:flex;align-items:center;justify-content:space-between;gap:14px;margin:16px 0;padding:13px 16px;border:1px solid var(--line);border-radius:15px;background:var(--panel)}
.learn-progress-tools strong,.learn-progress-tools small{display:block}.learn-progress-tools strong{font-size:11px}.learn-progress-tools small{margin-top:3px;color:var(--muted);font-size:9px;line-height:1.5}
.learn-progress-tools .button{flex:none}.lesson-progress-card{gap:0!important}
.lesson-card-progress-head{display:flex;align-items:center;gap:10px;margin:0 0 13px;min-width:0}
.lesson-card-progress-meter{flex:1;min-width:0}
.lesson-card-progress-meter .progress-line{height:7px;margin:0 0 5px}
.lesson-path-progress{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:5px;margin:0 0 6px}
.lesson-path-step{display:grid;gap:2px;min-width:0;padding:6px 7px;border:1px solid var(--line);border-radius:9px;background:var(--panel-2);color:var(--muted-2);line-height:1.1}
.lesson-path-step span{font-size:8px;font-weight:800;overflow:hidden;text-overflow:ellipsis}
.lesson-path-step small{font-size:7px;white-space:nowrap}
.lesson-path-step.is-complete{color:var(--text);border-color:color-mix(in srgb,var(--lesson-stage-color) 65%,var(--line));background:linear-gradient(135deg,color-mix(in srgb,var(--lesson-stage-color) 34%,var(--panel)),color-mix(in srgb,var(--lesson-stage-color) 12%,var(--panel)))}
.lesson-path-step.is-current{color:var(--text);border-color:color-mix(in srgb,var(--lesson-stage-color) 70%,var(--line));box-shadow:inset 0 -2px var(--lesson-stage-color)}
.lesson-card-progress-meter small{display:block;color:var(--muted-2);font-size:8px;line-height:1.4;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.lesson-progress-card .lesson-grade-badge{flex:none;justify-self:auto;min-width:42px;padding:6px 9px}
.lesson-progress-card .card-top{margin-bottom:0}
.lesson-progress-card h2{margin-top:12px}
.lesson-progress-card .card-link{margin-top:15px}
@media(max-width:520px){.learn-progress-tools{align-items:flex-start;flex-direction:column}.learn-progress-tools .button{align-self:flex-end}.lesson-card-progress-meter small{white-space:normal;max-height:2.8em}.lesson-path-progress{gap:3px}.lesson-path-step{padding:5px 4px}.lesson-path-step span{font-size:7px}.lesson-path-step small{font-size:6px}}

/* Practice opens every mapped scenario for the chosen mouse mechanic. */
.practice-mechanic-choice{width:100%;display:flex;align-items:center;justify-content:space-between;gap:18px;padding:15px 17px;border:1px solid var(--line);border-radius:15px;background:var(--panel);text-align:left;cursor:pointer;transition:border-color .16s,transform .16s,background-color .16s}
.practice-mechanic-choice:hover{border-color:var(--purple-2);background:var(--panel-2);transform:translateY(-1px)}
.practice-mechanic-copy{display:grid;justify-items:start;gap:5px;min-width:0}.practice-mechanic-copy strong{font-size:12px}.practice-mechanic-copy small{font-size:9px;line-height:1.55;color:var(--muted)}
.practice-mechanic-count{display:flex;align-items:center;gap:9px;flex:none;color:var(--purple);font-size:9px;font-weight:800}.practice-mechanic-count b{font-size:16px}
.practice-cue-card{margin:0 0 15px;padding:15px 18px;border:1px solid #ff485435;border-radius:15px;background:linear-gradient(110deg,#ff485414,transparent);}
.practice-cue-card .eyebrow{margin-bottom:4px}.practice-cue-card p{margin:2px 0;color:var(--text);font-size:12px;font-weight:750}.practice-cue-card small{font-size:9px;color:var(--muted)}
.practice-scenario-list{display:grid;gap:11px}.practice-scenario-list .fundamental-practice-card{margin:0;padding:16px;background:var(--panel)}
.practice-scenario-actions{display:flex;align-items:center;gap:9px;flex-wrap:wrap}.practice-scenario-actions .button{margin:0}.practice-scenario-actions .text-button{margin-left:auto}
@media(max-width:520px){.practice-mechanic-choice{align-items:flex-start;flex-direction:column;gap:11px}.practice-mechanic-count{align-self:flex-end}.practice-scenario-actions{align-items:stretch;flex-direction:column}.practice-scenario-actions .text-button{margin-left:0;text-align:left}}

/* Practice records are local reminders, while score records remain API evidence. */
.fundamental-practice-card .practice-log-status,.practice-resume-note{display:block;color:var(--muted);font-size:9px;line-height:1.5}
.fundamental-practice-card .button{width:100%;margin-top:8px}
.fundamental-practice-card .button:disabled{opacity:.72;cursor:default}
.practice-history{margin:16px 0}
.practice-history-list{display:grid;gap:8px}
.practice-history-list article{display:grid;grid-template-columns:auto minmax(120px,1fr) auto auto;align-items:center;gap:10px;padding:10px 12px;border:1px solid var(--line);border-radius:12px;background:var(--panel-2)}
.practice-history-list article strong{font-size:10px;overflow-wrap:anywhere}
.practice-history-list article small{font-size:8px;color:var(--muted)}
@media(max-width:760px){.practice-history-list article{grid-template-columns:auto 1fr}.practice-history-list article small{grid-column:2}.practice-history-list article .text-button{grid-column:1/-1;justify-self:start}}
.lesson-evidence-result{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-top:14px;padding:12px 14px;border:1px solid var(--line);border-radius:14px;background:var(--surface);color:var(--muted)}.lesson-evidence-result .eyebrow{font-size:10px;letter-spacing:.08em;color:var(--muted)}.lesson-evidence-result>strong{font-size:16px;color:var(--text)}.lesson-evidence-result .lesson-evidence-grade{font-size:22px;color:var(--mint)}.lesson-evidence-result small{font-size:12px}.lesson-evidence-result .text-button{margin-left:auto}

/* Compact rank path replaces the explanatory benchmark copy block. */
.benchmark-rank-display{display:flex;min-width:0;min-height:115px;flex-direction:column;justify-content:center;gap:12px;padding:18px;border:1px solid var(--line);border-radius:17px;background:linear-gradient(125deg,color-mix(in srgb,var(--purple) 10%,var(--panel)),var(--panel) 65%);box-shadow:var(--shadow)}.benchmark-rank-display-head{display:flex;align-items:center;justify-content:space-between;gap:12px}.benchmark-rank-display-head strong{color:var(--text);font-size:14px}.benchmark-rank-steps{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:7px}.benchmark-rank-step{position:relative;isolation:isolate;display:flex;min-width:0;min-height:44px;flex-direction:column;justify-content:center;gap:3px;overflow:hidden;padding:6px 9px;border:1px solid color-mix(in srgb,var(--rank-color) 30%,var(--line));border-radius:9px;background:color-mix(in srgb,var(--rank-color) 6%,var(--bg))}.benchmark-rank-step i{position:absolute;z-index:-1;inset:0 auto 0 0;width:var(--step-fill,0%);background:linear-gradient(90deg,color-mix(in srgb,var(--rank-color) 42%,transparent),color-mix(in srgb,var(--rank-color) 22%,transparent));transition:width .3s ease}.benchmark-rank-step small{color:var(--muted);font-size:7px;font-weight:800;letter-spacing:.08em}.benchmark-rank-step b{overflow:hidden;color:var(--text);font-size:10px;text-overflow:ellipsis;white-space:nowrap}.benchmark-rank-step.is-reached{border-color:color-mix(in srgb,var(--rank-color) 75%,var(--line))}.benchmark-rank-step.is-current{box-shadow:inset 0 0 0 1px var(--rank-color);transform:translateY(-2px)}.benchmark-rank-display>p{margin:0;color:var(--muted);font-size:9px}.benchmark-overall>small{font-size:9px}
@media(max-width:760px){.benchmark-rank-display{padding:14px}.benchmark-rank-steps{gap:4px}.benchmark-rank-step{padding:5px 6px}.benchmark-rank-step b{font-size:8px}}

.evxl-score-tier{gap:5px;padding-top:7px;padding-bottom:7px}.evxl-score-tier>b{font-size:9px;font-weight:850;letter-spacing:.01em}.evxl-score-tier>strong{font-size:clamp(12px,1.1vw,16px);font-weight:950;line-height:1.1;letter-spacing:-.025em;color:#fff;text-shadow:0 1px 2px #17131d,0 1px 5px #17131d,0 0 8px #17131de8;-webkit-text-stroke:.4px #17131d}.evxl-score-tier.is-reached>strong{color:#fff;text-shadow:0 1px 2px #17131d,0 1px 5px #17131d,0 0 8px #17131de8;-webkit-text-stroke:.45px #17131d}@media(max-width:1100px){.evxl-score-tier>b{font-size:8px}.evxl-score-tier>strong{font-size:12px}}
 
/* Fill rank cells flush to their rounded edges and keep every step level. */
.evxl-score-tier:before{inset:-1px auto -1px 0;width:var(--tier-fill,0%);border-radius:7px}.evxl-score-tier>b,.evxl-score-tier>strong{-webkit-text-stroke:.45px #17131d;text-shadow:none}.evxl-score-tier>strong{font-size:clamp(12px,1.1vw,16px);font-weight:950;line-height:1.1;color:#fff;letter-spacing:-.025em}.benchmark-rank-step.is-current{transform:none}.benchmark-rank-step.is-future{filter:grayscale(.9);opacity:.42}.benchmark-rank-step.is-future b,.benchmark-rank-step.is-future small{color:var(--muted)}

/* Keep benchmark score text crisp and readable across the filled color. */
.evxl-score-tier>b,.evxl-score-tier>small,.evxl-score-tier>strong{color:#fff;text-shadow:none!important;-webkit-text-stroke:0!important;filter:none!important}
.evxl-score-tier:before{background:linear-gradient(90deg,color-mix(in srgb,var(--tier-color,var(--purple)) 82%,#17131d),color-mix(in srgb,var(--tier-color,var(--purple)) 68%,#17131d))}
.evxl-score-tier>b{font-size:10px;font-weight:850;letter-spacing:0}
.evxl-score-tier>strong{font-size:clamp(13px,1.1vw,16px);font-weight:850;letter-spacing:0}
@media(max-width:1100px){.evxl-score-tier>b{font-size:9px}.evxl-score-tier>strong{font-size:13px}}


/* Keep every benchmark rank readable and make the ladder feel catlike. */
.benchmark-card-ranks{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));align-items:stretch;gap:5px}
.benchmark-card-ranks .rank-chip{display:flex;align-items:center;justify-content:center;min-width:0;min-height:29px;padding:4px 2px;font-size:clamp(8px,.72vw,10px);line-height:1.1;white-space:normal;overflow:visible;text-overflow:clip;overflow-wrap:anywhere}
.benchmark-rank-step{overflow:visible;min-height:48px}
.benchmark-rank-step b{overflow:visible;text-overflow:clip;white-space:normal;overflow-wrap:anywhere;line-height:1.15}
@media(max-width:760px){.benchmark-card-ranks{gap:4px}.benchmark-card-ranks .rank-chip{font-size:8px}.benchmark-rank-step{min-height:48px}.benchmark-rank-step b{font-size:8px}}


/* Give benchmark rank titles enough room to stay readable. */
.benchmark-card-ranks{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));align-items:stretch;gap:6px}
.benchmark-card-ranks .rank-chip{display:flex;align-items:center;justify-content:center;min-width:0;min-height:30px;padding:5px 6px;font-size:9px;line-height:1.15;white-space:normal;overflow:visible;text-overflow:clip;overflow-wrap:normal;word-break:normal;text-align:center}
.benchmark-rank-step{min-height:52px}
.benchmark-rank-step b{font-size:clamp(8px,.82vw,10px);white-space:normal;overflow-wrap:break-word;word-break:normal;overflow:visible;text-overflow:clip;line-height:1.15}
@media(max-width:760px){.benchmark-card-ranks{gap:5px}.benchmark-card-ranks .rank-chip{font-size:9px}.benchmark-rank-step b{font-size:8px}}


/* Distinct benchmark atmospheres: forest glow, spirit haze, and cosmic fire. */
.custom-benchmark-card{isolation:isolate;border-color:color-mix(in srgb,var(--benchmark-accent,var(--purple)) 26%,var(--line));background:linear-gradient(150deg,color-mix(in srgb,var(--benchmark-accent) 7%,var(--panel)),var(--panel) 62%)}
.custom-benchmark-card:before{z-index:0;right:-62px;bottom:-105px;width:250px;height:250px;border-radius:50%;background:radial-gradient(circle,color-mix(in srgb,var(--benchmark-accent) 34%,transparent),transparent 68%);opacity:.55}
.custom-benchmark-card:after{content:"";position:absolute;z-index:0;inset:0;pointer-events:none;opacity:.12;background:radial-gradient(circle at 91% 79%,var(--benchmark-accent) 0 1px,transparent 1.5px);background-size:17px 17px;mask-image:linear-gradient(135deg,transparent 46%,#000 100%)}
.custom-benchmark-card[data-benchmark-theme="easy"]:after{background-image:radial-gradient(ellipse at 100% 100%,color-mix(in srgb,var(--benchmark-accent) 60%,transparent),transparent 64%);opacity:.2}
.custom-benchmark-card[data-benchmark-theme="medium"]:after{background-image:repeating-radial-gradient(ellipse at 100% 100%,transparent 0 13px,color-mix(in srgb,var(--benchmark-accent) 30%,transparent) 14px 15px,transparent 16px 29px);opacity:.22}
.custom-benchmark-card[data-benchmark-theme="hard"]:after{background-image:radial-gradient(circle at 88% 74%,#fff3c0 0 1px,transparent 1.5px),radial-gradient(circle at 95% 86%,var(--benchmark-accent) 0 1.5px,transparent 2px),radial-gradient(ellipse at 100% 100%,color-mix(in srgb,var(--benchmark-accent) 38%,transparent),transparent 60%);background-size:31px 31px,43px 43px,auto;opacity:.27}
.custom-benchmark-card>*{position:relative;z-index:1}
.benchmark-card-ranks .rank-chip{color:var(--rank-color);border-color:color-mix(in srgb,var(--rank-color) 42%,var(--line));background:color-mix(in srgb,var(--rank-color) 11%,var(--bg))}
.benchmark-rank-display[data-benchmark-theme]{border-color:color-mix(in srgb,var(--benchmark-accent) 32%,var(--line));background:radial-gradient(ellipse at 100% 0%,color-mix(in srgb,var(--benchmark-accent) 17%,transparent),transparent 58%),var(--panel)}
.benchmark-rank-display[data-benchmark-theme="easy"]{background:radial-gradient(ellipse at 100% 0%,#a7d8a028,transparent 58%),var(--panel)}
.benchmark-rank-display[data-benchmark-theme="medium"]{background:radial-gradient(ellipse at 100% 0%,#bc9de832,transparent 58%),var(--panel)}
.benchmark-rank-display[data-benchmark-theme="hard"]{background:radial-gradient(ellipse at 100% 0%,#ff8a6633,transparent 58%),var(--panel)}


/* Center scenario score ladders and carry the benchmark rank palette into each tile. */
.task-evidence{display:flex;flex-direction:column;justify-content:center}
.evxl-score-line{width:100%;align-items:center}
.evxl-score-tier{
  border-color:color-mix(in srgb,var(--tier-color,var(--purple)) 38%,var(--line));
  background:color-mix(in srgb,var(--tier-color,var(--purple)) 8%,var(--bg));
  transition:border-color .18s,background-color .18s,box-shadow .18s;
}
.evxl-score-tier:before{
  background:linear-gradient(100deg,
    color-mix(in srgb,var(--tier-color,var(--purple)) 60%,var(--bg)),
    color-mix(in srgb,var(--tier-color,var(--purple)) 38%,transparent));
}
.evxl-score-tier.is-reached{
  border-color:color-mix(in srgb,var(--tier-color,var(--purple)) 72%,var(--line));
  background:color-mix(in srgb,var(--tier-color,var(--purple)) 20%,var(--bg));
}
.evxl-score-tier.is-current{
  box-shadow:inset 0 0 0 1px var(--tier-color,var(--purple)),0 0 12px color-mix(in srgb,var(--tier-color,var(--purple)) 20%,transparent);
}
@media(max-width:520px){
  .task-evidence{min-height:136px}
  .evxl-score-line{align-content:center}
}


/* Rank progress: theme the full shell and clip every fill inside its own cell. */
.benchmark-rank-display{
 position:relative;isolation:isolate;overflow:hidden;
 background-clip:padding-box;
}
.benchmark-rank-display[data-benchmark-theme="easy"]{
 border-color:color-mix(in srgb,#9acb9d 55%,var(--line));
 background:
  radial-gradient(ellipse at 8% 0%,color-mix(in srgb,#e3b06a 30%,transparent),transparent 52%),
  radial-gradient(ellipse at 84% 100%,color-mix(in srgb,#79c5a1 23%,transparent),transparent 56%),
  linear-gradient(120deg,color-mix(in srgb,#e5bd7b 12%,var(--panel)),color-mix(in srgb,#94d1b4 10%,var(--panel)) 62%,var(--panel));
}
.benchmark-rank-display[data-benchmark-theme="medium"]{
 border-color:color-mix(in srgb,#bc9de8 54%,var(--line));
 background:
  radial-gradient(ellipse at 8% 0%,color-mix(in srgb,#8fc4c9 23%,transparent),transparent 52%),
  radial-gradient(ellipse at 88% 100%,color-mix(in srgb,#d295d0 25%,transparent),transparent 58%),
  linear-gradient(120deg,color-mix(in srgb,#9ab9df 10%,var(--panel)),color-mix(in srgb,#c19be4 12%,var(--panel)) 62%,var(--panel));
}
.benchmark-rank-display[data-benchmark-theme="hard"]{
 border-color:color-mix(in srgb,#ef8b77 55%,var(--line));
 background:
  radial-gradient(ellipse at 8% 0%,color-mix(in srgb,#ffce79 25%,transparent),transparent 52%),
  radial-gradient(ellipse at 90% 100%,color-mix(in srgb,#db6c92 26%,transparent),transparent 58%),
  linear-gradient(120deg,color-mix(in srgb,#ef9277 13%,var(--panel)),color-mix(in srgb,#a36ab4 13%,var(--panel)) 62%,var(--panel));
}
.benchmark-rank-step{
 position:relative;isolation:isolate;overflow:hidden;
 background-clip:padding-box
}
.benchmark-rank-step i{
 z-index:0;inset:1px;border-radius:7px;
 clip-path:inset(0 round 7px);pointer-events:none
}
.benchmark-rank-step small,.benchmark-rank-step b{
 position:relative;z-index:1
}
.benchmark-rank-step.is-current{transform:none}
:root[data-theme=light] .benchmark-rank-display[data-benchmark-theme="easy"]{
 background:
  radial-gradient(ellipse at 8% 0%,#e9bc6d45,transparent 54%),
  radial-gradient(ellipse at 88% 100%,#68b89430,transparent 58%),
  linear-gradient(120deg,#fff8e9,#f0f8f0 62%,#fffdfa)
}
:root[data-theme=light] .benchmark-rank-display[data-benchmark-theme="medium"]{
 background:
  radial-gradient(ellipse at 7% 0%,#79bbc432,transparent 54%),
  radial-gradient(ellipse at 90% 100%,#ca8ccb35,transparent 58%),
  linear-gradient(120deg,#f2f9fb,#f7f0ff 62%,#fffdfa)
}
:root[data-theme=light] .benchmark-rank-display[data-benchmark-theme="hard"]{
 background:
  radial-gradient(ellipse at 7% 0%,#e4a05d38,transparent 54%),
  radial-gradient(ellipse at 90% 100%,#d45d7a36,transparent 58%),
  linear-gradient(120deg,#fff5e9,#fff0f1 62%,#fffdfa)
}
:root[data-theme=light] .benchmark-rank-step{
 background-color:#fffdfa;
 box-shadow:inset 0 1px #ffffffb0
}


/* Fill each earned/current rank cell fully; show fractional progress as a slim underline. */
.benchmark-rank-step.is-reached{
 background:linear-gradient(112deg,
  color-mix(in srgb,var(--rank-color) 34%,var(--panel-2)),
  color-mix(in srgb,var(--rank-color) 18%,var(--panel-2)) 68%,
  color-mix(in srgb,var(--rank-color) 13%,var(--panel-2)))
}
.benchmark-rank-step.is-current{
 background:linear-gradient(112deg,
  color-mix(in srgb,var(--rank-color) 36%,var(--panel-2)),
  color-mix(in srgb,var(--rank-color) 21%,var(--panel-2)) 68%,
  color-mix(in srgb,var(--rank-color) 16%,var(--panel-2)));
 box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--rank-color) 76%,var(--line))
}
.benchmark-rank-step i{
 inset:auto auto 0 0;height:3px;border-radius:0;
 background:linear-gradient(90deg,var(--rank-color),color-mix(in srgb,var(--rank-color) 65%,white));
 clip-path:none
}
:root[data-theme=light] .benchmark-rank-step.is-reached{
 background:linear-gradient(112deg,
  color-mix(in srgb,var(--rank-color) 23%,#fffdfa),
  color-mix(in srgb,var(--rank-color) 14%,#fffdfa) 68%,
  color-mix(in srgb,var(--rank-color) 10%,#fffdfa))
}
:root[data-theme=light] .benchmark-rank-step.is-current{
 background:linear-gradient(112deg,
  color-mix(in srgb,var(--rank-color) 29%,#fffdfa),
  color-mix(in srgb,var(--rank-color) 18%,#fffdfa) 68%,
  color-mix(in srgb,var(--rank-color) 12%,#fffdfa))
}

/* Fill earned/current ranks fully; keep fractional progress in a slim underline. */
.benchmark-rank-step.is-reached{
 background:linear-gradient(112deg,
  color-mix(in srgb,var(--rank-color) 34%,var(--panel-2)),
  color-mix(in srgb,var(--rank-color) 18%,var(--panel-2)) 68%,
  color-mix(in srgb,var(--rank-color) 13%,var(--panel-2)))
}
.benchmark-rank-step.is-current{
 background:linear-gradient(112deg,
  color-mix(in srgb,var(--rank-color) 36%,var(--panel-2)),
  color-mix(in srgb,var(--rank-color) 21%,var(--panel-2)) 68%,
  color-mix(in srgb,var(--rank-color) 16%,var(--panel-2)));
 box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--rank-color) 76%,var(--line))
}
.benchmark-rank-step i{
 inset:auto auto 0 0;height:3px;border-radius:0;
 background:linear-gradient(90deg,var(--rank-color),color-mix(in srgb,var(--rank-color) 65%,white));
 clip-path:none
}
:root[data-theme=light] .benchmark-rank-step.is-reached{
 background:linear-gradient(112deg,
  color-mix(in srgb,var(--rank-color) 23%,#fffdfa),
  color-mix(in srgb,var(--rank-color) 14%,#fffdfa) 68%,
  color-mix(in srgb,var(--rank-color) 10%,#fffdfa))
}
:root[data-theme=light] .benchmark-rank-step.is-current{
 background:linear-gradient(112deg,
  color-mix(in srgb,var(--rank-color) 29%,#fffdfa),
  color-mix(in srgb,var(--rank-color) 18%,#fffdfa) 68%,
  color-mix(in srgb,var(--rank-color) 12%,#fffdfa))
}

/* Keep the benchmark theme wash continuous across the entire rank panel. */
.benchmark-rank-display[data-benchmark-theme]{
 background-color:var(--panel);
 background-image:linear-gradient(118deg,
  color-mix(in srgb,var(--current-rank-color) 30%,var(--panel)) 0%,
  color-mix(in srgb,var(--current-rank-color) 20%,var(--panel)) 48%,
  color-mix(in srgb,var(--current-rank-color) 12%,var(--panel)) 100%)!important;
 background-repeat:no-repeat;
 background-size:100% 100%
}
:root[data-theme=light] .benchmark-rank-display[data-benchmark-theme]{
 background-color:#fffdfa;
 background-image:linear-gradient(118deg,
  color-mix(in srgb,var(--current-rank-color) 19%,#fffdfa) 0%,
  color-mix(in srgb,var(--current-rank-color) 12%,#fffdfa) 48%,
  color-mix(in srgb,var(--current-rank-color) 7%,#fffdfa) 100%)!important
}

/* The two highest ranks get a distinct ambient effect in each benchmark theme. */
.benchmark-rank-display[data-benchmark-theme]{position:relative;isolation:isolate;overflow:hidden}
.benchmark-rank-display::before{content:"";position:absolute;inset:-35% -5%;z-index:0;pointer-events:none;opacity:0;filter:blur(15px);transform:translate3d(0,0,0) scale(1.02);will-change:transform,opacity}
.benchmark-rank-display>*{position:relative;z-index:1}
.benchmark-rank-display[data-benchmark-theme="easy"][data-current-rank-index="3"]::before{opacity:.44;background:radial-gradient(ellipse at 18% 95%,#101215e8 0%,#24282bd1 24%,transparent 52%),radial-gradient(ellipse at 66% 108%,#25292bd1 0%,transparent 47%),radial-gradient(ellipse at 91% 75%,#69746a75 0%,transparent 34%);animation:direcat-smoke 7s ease-in-out infinite alternate}
.benchmark-rank-display[data-benchmark-theme="easy"][data-current-rank-index="4"]::before{opacity:.66;filter:blur(8px);background:radial-gradient(ellipse at 8% 110%,#ff572edb 0%,#fb8835a8 21%,transparent 43%),radial-gradient(ellipse at 36% 120%,#ffd16dbb 0%,#ff623c91 25%,transparent 48%),radial-gradient(ellipse at 76% 115%,#ff6336d1 0%,#f7a04f91 24%,transparent 46%),radial-gradient(ellipse at 96% 104%,#ffb24bb3 0%,transparent 38%);animation:hellcat-flame 2.8s ease-in-out infinite alternate}
.benchmark-rank-display[data-benchmark-theme="medium"][data-current-rank-index="3"]::before{opacity:.55;background:radial-gradient(ellipse at 20% 90%,#54247cd1,transparent 48%),radial-gradient(ellipse at 72% 105%,#ba59d0bb,transparent 44%),radial-gradient(ellipse at 91% 35%,#6e69df99,transparent 38%);animation:demon-wisp 6s ease-in-out infinite alternate}
.benchmark-rank-display[data-benchmark-theme="medium"][data-current-rank-index="4"]::before{opacity:.6;background:radial-gradient(ellipse at 15% 115%,#ed79d4a8,transparent 44%),radial-gradient(ellipse at 74% 95%,#8a52d9d1,transparent 48%),radial-gradient(ellipse at 52% 10%,#71d9e899,transparent 41%);animation:bakeneko-aura 4.3s ease-in-out infinite alternate}
.benchmark-rank-display[data-benchmark-theme="hard"][data-current-rank-index="3"]::before{opacity:.58;background:radial-gradient(ellipse at 13% 110%,#1b1c4df0,transparent 52%),radial-gradient(ellipse at 58% 95%,#532785d1,transparent 46%),radial-gradient(ellipse at 92% 28%,#c749728a,transparent 39%);animation:world-ender-void 8s linear infinite}
.benchmark-rank-display[data-benchmark-theme="hard"][data-current-rank-index="4"]::before{opacity:.62;background:radial-gradient(ellipse at 8% 100%,#fb557499,transparent 45%),radial-gradient(ellipse at 80% 112%,#ffb34ba8,transparent 42%),radial-gradient(ellipse at 73% 15%,#9c72ffb8,transparent 49%),radial-gradient(ellipse at 29% 45%,#f4d27980,transparent 36%);animation:cataclysm-burst 3.8s ease-in-out infinite alternate}
@keyframes direcat-smoke{0%{transform:translate3d(-2%,2%,0) scale(1);filter:blur(16px)}100%{transform:translate3d(3%,-5%,0) scale(1.08);filter:blur(12px)}}
@keyframes hellcat-flame{0%{transform:translate3d(-1%,2%,0) scaleY(.92);opacity:.48}100%{transform:translate3d(1%,-2%,0) scaleY(1.08);opacity:.78}}
@keyframes demon-wisp{0%{transform:translate3d(-3%,1%,0) scale(1);filter:blur(16px)}100%{transform:translate3d(3%,-3%,0) scale(1.08);filter:blur(11px)}}
@keyframes bakeneko-aura{0%{transform:translate3d(2%,2%,0) scale(.98);opacity:.36}100%{transform:translate3d(-2%,-2%,0) scale(1.08);opacity:.68}}
@keyframes world-ender-void{0%{transform:rotate(0deg) scale(1);filter:blur(17px)}100%{transform:rotate(8deg) scale(1.13);filter:blur(12px)}}
@keyframes cataclysm-burst{0%{transform:translate3d(-2%,1%,0) scale(.94);opacity:.38}100%{transform:translate3d(2%,-1%,0) scale(1.08);opacity:.7}}
.evxl-score-line[data-benchmark-theme] .evxl-score-tier{isolation:isolate}
.evxl-score-line[data-benchmark-theme] .evxl-score-tier::after{content:"";position:absolute;z-index:0;inset:-35%;pointer-events:none;opacity:0;filter:blur(7px);transform:translate3d(0,0,0);will-change:transform,opacity}
.evxl-score-line[data-benchmark-theme="easy"] .evxl-score-tier[data-rank-index="3"].is-reached::after{opacity:.48;background:radial-gradient(ellipse at 50% 100%,#17191ddd,transparent 66%);animation:direcat-smoke 7s ease-in-out infinite alternate}
.evxl-score-line[data-benchmark-theme="easy"] .evxl-score-tier[data-rank-index="4"].is-reached::after{opacity:.66;filter:blur(5px);background:radial-gradient(ellipse at 50% 115%,#ff633cdb 0%,#ffb246b8 34%,transparent 70%);animation:hellcat-flame 2.8s ease-in-out infinite alternate}
.evxl-score-line[data-benchmark-theme="medium"] .evxl-score-tier[data-rank-index="3"].is-reached::after{opacity:.58;background:radial-gradient(ellipse at 50% 100%,#632398e0,transparent 70%);animation:demon-wisp 6s ease-in-out infinite alternate}
.evxl-score-line[data-benchmark-theme="medium"] .evxl-score-tier[data-rank-index="4"].is-reached::after{opacity:.58;background:radial-gradient(ellipse at 50% 100%,#d461dfd6,transparent 70%);animation:bakeneko-aura 4.3s ease-in-out infinite alternate}
.evxl-score-line[data-benchmark-theme="hard"] .evxl-score-tier[data-rank-index="3"].is-reached::after{opacity:.58;background:radial-gradient(ellipse at 50% 100%,#333176ed,transparent 70%);animation:world-ender-void 8s linear infinite}
.evxl-score-line[data-benchmark-theme="hard"] .evxl-score-tier[data-rank-index="4"].is-reached::after{opacity:.66;background:radial-gradient(ellipse at 50% 100%,#f16c68e0,transparent 74%);animation:cataclysm-burst 3.8s ease-in-out infinite alternate}
.evxl-score-tier.is-reached>b,.evxl-score-tier.is-reached>strong{position:relative;z-index:1}
@media(prefers-reduced-motion:reduce){.benchmark-rank-display::before,.evxl-score-line[data-benchmark-theme] .evxl-score-tier::after{animation:none!important;will-change:auto}}
@media(max-width:700px){.benchmark-rank-display::before{inset:-16% -12%}}

/* Match the rank frame to the active rank. */
.benchmark-rank-display[data-current-rank-index]:not([data-current-rank-index="-1"]){border-color:color-mix(in srgb,var(--current-rank-color) 88%,white)!important;box-shadow:0 0 0 1px color-mix(in srgb,var(--current-rank-color) 48%,transparent),0 12px 34px color-mix(in srgb,var(--current-rank-color) 25%,transparent)}
.benchmark-rank-display{position:relative;isolation:isolate;overflow:hidden}
.benchmark-rank-display::before,.benchmark-rank-display::after{content:"";position:absolute;inset:-20%;z-index:0;pointer-events:none;opacity:0;will-change:transform,opacity}
.benchmark-rank-display>*{position:relative;z-index:1}
/* Direcat smoke and rising Hellcat flames. */
.benchmark-rank-display[data-benchmark-theme="easy"][data-current-rank-index="3"]::after{opacity:.72;background:linear-gradient(0deg,#111418dc,#20242888 38%,transparent 78%),radial-gradient(ellipse at 20% 100%,#747877b0,transparent 38%),radial-gradient(ellipse at 76% 112%,#40464bd1,transparent 44%);animation:direcat-smoke-roll 4.8s ease-in-out infinite alternate}
.benchmark-rank-display[data-benchmark-theme="easy"][data-current-rank-index="4"]::after{opacity:.86;inset:-35% -8% -48%;background:repeating-conic-gradient(from 220deg at 50% 112%,transparent 0deg 15deg,#ffbc58df 17deg 20deg,#ff512fe8 22deg 29deg,transparent 32deg 45deg),linear-gradient(0deg,#f34530b8,#ff9d3c55 40%,transparent 80%);background-size:100% 190%;background-position:center bottom;mask-image:linear-gradient(to top,#000,#000 46%,transparent 96%);animation:hellcat-flames 1.6s ease-in-out infinite alternate}
/* Spectral ribbons for Demon and Bakeneko. */
.benchmark-rank-display[data-benchmark-theme="medium"][data-current-rank-index="3"]::after{opacity:.78;background:repeating-linear-gradient(112deg,transparent 0 35px,#a45fe2b0 40px 45px,transparent 50px 82px),radial-gradient(ellipse at 25% 110%,#8639b8d9,transparent 58%),radial-gradient(ellipse at 82% 15%,#51d6d98c,transparent 46%);animation:demon-ribbons 3.8s ease-in-out infinite alternate}
.benchmark-rank-display[data-benchmark-theme="medium"][data-current-rank-index="4"]::after{opacity:.8;background:radial-gradient(ellipse at 74% 112%,#e857d4ba,transparent 50%),radial-gradient(ellipse at 20% 80%,#7755e0cc,transparent 48%);animation:bakeneko-haunt 3s ease-in-out infinite alternate}
/* A rotating void for World Ender and a cosmic shockwave for Cataclysm. */
.benchmark-rank-display[data-benchmark-theme="hard"][data-current-rank-index="3"]::after{opacity:.82;background:repeating-conic-gradient(from 20deg at 76% 46%,transparent 0deg 28deg,#bd6b9a75 31deg 34deg,transparent 38deg 60deg),radial-gradient(ellipse at 75% 48%,#11132f 0%,#542d81e0 32%,transparent 69%),radial-gradient(ellipse at 15% 110%,#455cc4a8,transparent 54%);animation:world-ender-orbit 10s linear infinite}
.benchmark-rank-display[data-benchmark-theme="hard"][data-current-rank-index="4"]::after{opacity:.82;background:radial-gradient(ellipse at 52% 60%,#f14c7190,transparent 60%),conic-gradient(from 15deg at 50% 50%,transparent,#ee824b75,transparent,#9270ff80,transparent);animation:cataclysm-wave 2.7s ease-in-out infinite alternate}
@keyframes direcat-smoke-roll{0%{transform:translate(-4%,2%) scale(1);filter:blur(14px)}100%{transform:translate(4%,-5%) scale(1.1);filter:blur(8px)}}
@keyframes hellcat-flames{0%{transform:translateY(4%) scaleY(.8);filter:saturate(.9) brightness(.9)}100%{transform:translateY(-3%) scaleY(1.1);filter:saturate(1.5) brightness(1.25)}}
@keyframes demon-ribbons{0%{transform:translate(-3%,2%) skewX(-3deg)}100%{transform:translate(3%,-2%) skewX(3deg)}}
@keyframes bakeneko-haunt{0%{transform:translate(2%,2%) scale(.96);opacity:.55}100%{transform:translate(-2%,-2%) scale(1.08);opacity:.92}}
@keyframes world-ender-orbit{0%{transform:rotate(0) scale(1);filter:hue-rotate(0)}100%{transform:rotate(360deg) scale(1.14);filter:hue-rotate(34deg)}}
@keyframes cataclysm-wave{0%{transform:scale(.9);opacity:.48}100%{transform:scale(1.12);opacity:.9}}
.evxl-score-line[data-benchmark-theme="easy"] .evxl-score-tier[data-rank-index="3"].is-reached{animation:score-direcat 4.5s ease-in-out infinite}
.evxl-score-line[data-benchmark-theme="easy"] .evxl-score-tier[data-rank-index="4"].is-reached{animation:score-hellcat 1.8s ease-in-out infinite alternate}
.evxl-score-line[data-benchmark-theme="medium"] .evxl-score-tier[data-rank-index="3"].is-reached{animation:score-demon 3.7s ease-in-out infinite}
.evxl-score-line[data-benchmark-theme="medium"] .evxl-score-tier[data-rank-index="4"].is-reached{animation:score-bakeneko 2.8s ease-in-out infinite alternate}
.evxl-score-line[data-benchmark-theme="hard"] .evxl-score-tier[data-rank-index="3"].is-reached{animation:score-ender 7s linear infinite}
.evxl-score-line[data-benchmark-theme="hard"] .evxl-score-tier[data-rank-index="4"].is-reached{animation:score-cataclysm 2.5s ease-in-out infinite alternate}
@keyframes score-direcat{50%{box-shadow:inset 0 0 0 1px #899390,0 0 14px #87918d88}}
@keyframes score-hellcat{to{box-shadow:inset 0 0 0 1px #ff7948,0 0 18px #ff5c3cbb}}
@keyframes score-demon{50%{box-shadow:inset 0 0 0 1px #bd70ec,0 0 17px #ad55e8aa}}
@keyframes score-bakeneko{to{box-shadow:inset 0 0 0 1px #f28cde,0 0 18px #b45cffaa}}
@keyframes score-ender{50%{box-shadow:inset 0 0 0 1px #8371e8,0 0 16px #7959e0aa}}
@keyframes score-cataclysm{to{box-shadow:inset 0 0 0 1px #ff778c,0 0 20px #fa5574aa}}
@media(prefers-reduced-motion:reduce){.benchmark-rank-display::before,.benchmark-rank-display::after,.evxl-score-line[data-benchmark-theme] .evxl-score-tier{animation:none!important;will-change:auto}}

/* Demon is a dark, infernal presence: ember eyes in rolling shadow, not bright stripes. */
.benchmark-rank-display[data-benchmark-theme="medium"][data-current-rank-index="3"]::after{
 opacity:.9;inset:-28% -8%;filter:blur(1px);
 background:
  radial-gradient(ellipse 2.2% 9% at 45% 49%,#ff5148 0%,#ff423a9e 38%,transparent 100%),
  radial-gradient(ellipse 2.2% 9% at 55% 49%,#ff5148 0%,#ff423a9e 38%,transparent 100%),
  radial-gradient(ellipse at 50% 52%,#b625347a 0%,transparent 33%),
  radial-gradient(ellipse at 14% 95%,#130e1bea 0%,#31153fd4 37%,transparent 66%),
  radial-gradient(ellipse at 84% 108%,#22102cd9 0%,#4b174c9e 42%,transparent 68%),
  linear-gradient(0deg,#170e1ab8,transparent 72%);
 animation:demon-shadow 3.2s ease-in-out infinite alternate
}
@keyframes demon-shadow{
 0%{transform:translate3d(-1%,2%,0) scale(.98);filter:blur(2px) brightness(.82)}
 100%{transform:translate3d(1%,-2%,0) scale(1.04);filter:blur(5px) brightness(1.13)}
}

/* Replace Demon’s streaks with a shadowed, ember-eyed infernal aura. */
.benchmark-rank-display[data-benchmark-theme="medium"][data-current-rank-index="3"]::after{
 opacity:.9;inset:-28% -8%;filter:blur(1px);
 background:
  radial-gradient(ellipse 2.2% 9% at 45% 49%,#ff5148 0%,#ff423a9e 38%,transparent 100%),
  radial-gradient(ellipse 2.2% 9% at 55% 49%,#ff5148 0%,#ff423a9e 38%,transparent 100%),
  radial-gradient(ellipse at 50% 52%,#b625347a 0%,transparent 33%),
  radial-gradient(ellipse at 14% 95%,#130e1bea 0%,#31153fd4 37%,transparent 66%),
  radial-gradient(ellipse at 84% 108%,#22102cd9 0%,#4b174c9e 42%,transparent 68%),
  linear-gradient(0deg,#170e1ab8,transparent 72%);
 animation:demon-shadow 3.2s ease-in-out infinite alternate
}
@keyframes demon-shadow{0%{transform:translate3d(-1%,2%,0) scale(.98);filter:blur(2px) brightness(.82)}100%{transform:translate3d(1%,-2%,0) scale(1.04);filter:blur(5px) brightness(1.13)}}



/* Brief, dismissible feedback for meaningful practice milestones. */
.milestone-toast{position:fixed;z-index:120;right:24px;bottom:24px;display:grid;grid-template-columns:38px minmax(0,1fr) 26px;align-items:center;gap:11px;width:min(380px,calc(100vw - 32px));padding:13px 14px;border:1px solid color-mix(in srgb,var(--milestone-color,#ff4854) 58%,var(--line));border-radius:16px;background:color-mix(in srgb,var(--milestone-color,#ff4854) 14%,var(--panel));box-shadow:0 14px 42px #08060c66,0 0 25px color-mix(in srgb,var(--milestone-color,#ff4854) 20%,transparent);opacity:0;transform:translateY(14px) scale(.98);pointer-events:none;transition:opacity .24s ease,transform .28s cubic-bezier(.2,.8,.2,1);--milestone-color:#ff4854}
.milestone-toast.is-visible{opacity:1;transform:translateY(0) scale(1);pointer-events:auto}.milestone-toast.milestone-unlock{--milestone-color:#9ee4c7}.milestone-toast.milestone-personal-best{--milestone-color:#f5d78c}.milestone-toast.milestone-rank{--milestone-color:#ef9cae}
.milestone-icon{display:grid;place-items:center;width:36px;height:36px;border-radius:12px;background:color-mix(in srgb,var(--milestone-color) 20%,var(--panel));color:var(--milestone-color);font-size:21px;font-weight:900;animation:milestone-pop .55s cubic-bezier(.2,.9,.3,1.3) both}.milestone-copy{display:grid;gap:2px;min-width:0}.milestone-copy strong{font-size:12px}.milestone-copy small{color:var(--muted);font-size:10px;line-height:1.4}.milestone-close{width:26px;height:26px;border:0;border-radius:8px;background:transparent;color:var(--muted);font-size:19px;cursor:pointer}.milestone-close:hover{background:var(--panel-3);color:var(--text)}
@keyframes milestone-pop{0%{opacity:0;transform:scale(.55) rotate(-16deg)}65%{transform:scale(1.18) rotate(5deg)}100%{opacity:1;transform:scale(1) rotate(0)}}
@media(max-width:600px){.milestone-toast{right:12px;bottom:12px;width:calc(100vw - 24px)}}
@media(prefers-reduced-motion:reduce){.milestone-toast,.milestone-icon{transition:none!important;animation:none!important;transform:none!important}}


/* Richer rank color and glow against the light FERXL canvas. */
:root[data-theme=light] .benchmark-rank-display[data-benchmark-theme]{border-color:color-mix(in srgb,var(--current-rank-color) 66%,#e4d3cc)!important;box-shadow:0 0 0 1px color-mix(in srgb,var(--current-rank-color) 30%,transparent),0 18px 42px color-mix(in srgb,var(--current-rank-color) 24%,transparent),inset 0 1px #ffffffa8}
:root[data-theme=light] .benchmark-rank-step.is-reached{background:linear-gradient(112deg,color-mix(in srgb,var(--rank-color) 30%,#fffaf7),color-mix(in srgb,var(--rank-color) 22%,#fffaf7) 68%,color-mix(in srgb,var(--rank-color) 15%,#fffaf7));box-shadow:inset 0 1px #ffffff9c,0 4px 12px color-mix(in srgb,var(--rank-color) 12%,transparent)}
:root[data-theme=light] .benchmark-rank-step.is-current{background:linear-gradient(112deg,color-mix(in srgb,var(--rank-color) 38%,#fffaf7),color-mix(in srgb,var(--rank-color) 28%,#fffaf7) 68%,color-mix(in srgb,var(--rank-color) 19%,#fffaf7));box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--rank-color) 80%,#fff),inset 0 1px #ffffffb8,0 5px 15px color-mix(in srgb,var(--rank-color) 17%,transparent)}
:root[data-theme=light] .benchmark-rank-display[data-benchmark-theme]::before,:root[data-theme=light] .benchmark-rank-display[data-benchmark-theme]::after{filter:saturate(1.28) contrast(1.04)}
:root[data-theme=light] .evxl-score-line[data-benchmark-theme] .evxl-score-tier.is-reached{filter:saturate(1.18);box-shadow:inset 0 1px #ffffff45}

:root[data-theme=light] .benchmark-card-ranks .rank-chip{border-color:color-mix(in srgb,var(--rank-color) 57%,#d9bdb7);background:linear-gradient(135deg,color-mix(in srgb,var(--rank-color) 24%,#fffaf7),color-mix(in srgb,var(--rank-color) 13%,#fffaf7));box-shadow:inset 0 1px #ffffffc4,0 4px 12px color-mix(in srgb,var(--rank-color) 13%,transparent);font-weight:800}
:root[data-theme=light] .benchmark-rank-step.is-reached{background:linear-gradient(112deg,color-mix(in srgb,var(--rank-color) 34%,#fffaf7),color-mix(in srgb,var(--rank-color) 25%,#fffaf7) 68%,color-mix(in srgb,var(--rank-color) 17%,#fffaf7));box-shadow:inset 0 1px #ffffffbd,0 5px 15px color-mix(in srgb,var(--rank-color) 15%,transparent)}
:root[data-theme=light] .benchmark-rank-step.is-current{background:linear-gradient(112deg,color-mix(in srgb,var(--rank-color) 43%,#fffaf7),color-mix(in srgb,var(--rank-color) 33%,#fffaf7) 68%,color-mix(in srgb,var(--rank-color) 23%,#fffaf7));box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--rank-color) 84%,#fff),inset 0 1px #ffffffd4,0 6px 18px color-mix(in srgb,var(--rank-color) 20%,transparent)}