html:root{--fun-n: 5;--fun-pastel: linear-gradient(90deg, var(--fun-p3), var(--fun-p4) 25%, var(--fun-p7) 50%, var(--fun-p5) 75%, var(--fun-p6));--fun-lit: linear-gradient(90deg, var(--fun-l3), var(--fun-l4) 25%, var(--fun-l7) 50%, var(--fun-l5) 75%, var(--fun-l6))}.grader-card{display:grid;gap:12px;align-content:start;padding:12px;border:3px solid transparent;border-radius:20px;rotate:-1.5deg;background:linear-gradient(#fff,#fff) padding-box,var(--fun-lit) calc(var(--at, 0) * 100% / (var(--fun-n) - 1)) 0 / calc(var(--fun-n) * 100%) 100% border-box;box-shadow:0 18px 40px #17181a29;transition:background-position .7s var(--ease)}.grader-swap{display:grid}.grader-swap>*{grid-area:1 / 1;align-self:center;transition:opacity .5s,filter .5s,translate .5s var(--ease)}.grader-b,.grader-two .grader-a{opacity:0;filter:blur(6px);translate:0 8px}.grader-two .grader-a{translate:0 -8px}.grader-two .grader-b{opacity:1;filter:none;translate:0 0}.grader-tag{font:600 10px/1.2 var(--sans);letter-spacing:.06em;text-transform:uppercase;color:var(--mute)}.grader-line{margin-top:6px!important;font:600 13px/1.35 var(--sans);letter-spacing:-.01em}.grader-card mark{margin:0 -.1em;padding:0 .1em;border-radius:.25em;background:none;color:inherit;transition:background-color .3s,text-decoration-color .3s}.grader-k3{text-decoration:underline wavy transparent;text-underline-offset:3px}.grader-card:has(.grader-bars>:nth-child(1).on) .grader-k1{background:var(--fun-p3)}.grader-card:has(.grader-bars>:nth-child(2).on) .grader-k2{background:var(--fun-p4)}.grader-card:has(.grader-bars>:nth-child(3).on) .grader-k3{text-decoration-color:#ff6b4a}.grader-bars{display:grid;gap:6px;margin:0;padding:0;list-style:none}.grader-bars li{display:grid;grid-template-columns:18px 1fr;align-items:center;gap:6px;font-size:13px;line-height:1}.grader-bars li>span:first-child{transition:scale .3s var(--ease)}.grader-bars li.on>span:first-child{scale:1.3}.grader-bars .fun-seg{height:8px;border-radius:4px;background:var(--surface-2)}.grader-bars .fun-seg i{width:calc(var(--a) * 100%);border-radius:inherit;background:var(--fun-lit) calc(var(--fun-i, 0) * 100% / (var(--fun-n) - 1)) 0 / calc(var(--fun-n) * 100%) 100%}.grader-two .grader-bars .fun-seg i{width:calc(var(--b) * 100%)}.grader-bars .fun-seg.on i{animation-timing-function:cubic-bezier(.3,.7,.4,1)}.grader-bars li:last-child .fun-seg.on i{animation-timing-function:linear(0,.6 15%,.9 30%,1 42%,1)}.grader-foot p{display:flex;flex-wrap:wrap;align-items:center;gap:6px 8px}.grader-foot p>*{opacity:0}.grader-card:has(.grader-bars>:last-child.on) .grader-foot p>*{animation:grader-pop .6s cubic-bezier(.3,1.6,.5,1) 1.5s both}.grader-card:has(.grader-bars>:last-child.on) .grader-foot p>:last-child{animation-delay:2.1s}.fun-stage:is(:hover,.fun-away,:has(:focus-visible),:has([aria-pressed=true])) .grader-foot p>*{animation-play-state:paused}@keyframes grader-pop{0%{opacity:0;scale:.4;rotate:-8deg}to{opacity:1;scale:1;rotate:0deg}}.grader-sum{font:600 12px/1 var(--sans);color:var(--mute)}.grader-sum b{font-size:26px;letter-spacing:-.03em;color:var(--ink);font-variant-numeric:tabular-nums}.grader-chip{padding:5px 9px;border-radius:999px;font:600 11px/1.25 var(--sans);background:var(--fun-p6);box-shadow:inset 0 0 0 1px #ffffffb3}.grader-b .grader-chip{background:var(--fun-p4)}@media(max-width:600px){.grader-stage .fun-stage-body{grid-template:"h" "strip" "demo" "tip" / minmax(0,1fr)}.grader-demo{justify-self:center;width:min(100%,340px)}.grader-card{rotate:-1deg}.grader-line{font-size:15px}}@media(min-width:1024px){.grader-stage .fun-stage-body{grid-template-columns:minmax(0,1fr) 236px}.grader-card{gap:10px;padding:10px}}.grader-top{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:var(--s3) var(--s4)}.result .grader-said{font:600 var(--t1)/1.35 var(--sans);letter-spacing:-.015em}.grader-claim-head{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:var(--s2) var(--s3)}.result .grader-claim-head h3{margin:0}.grader-claim-head .fun-pill{margin:0;padding:8px 14px;font-size:var(--t0);animation:fun-badge .7s cubic-bezier(.3,1.6,.5,1) .3s both}.result .grader-boxes>.fun-box{padding-bottom:22px}.grader-boxes>.fun-box:after{opacity:var(--value, 0)}.grader-boxes .fun-pill b{font:inherit}.grader-meter{position:absolute;left:var(--s4);right:var(--s4);bottom:9px;height:4px;border-radius:2px;background:#ffffffa6}.grader-meter i{display:block;width:calc(var(--value, 0) * 100%);height:100%;border-radius:inherit;background:var(--ink);opacity:.75;transform-origin:0 50%;animation:fun-grow .9s var(--ease) calc(.3s + var(--n, 0) * 90ms) both}@media(min-width:640px){.grader-boxes>.fun-box{grid-template-columns:13.5em minmax(0,1fr);align-items:center;column-gap:var(--s4)}}.grader-flags .fun-chip{--lit: linear-gradient(110deg, #ffd5c7, #ffb9a1)}.result .grader-notes{list-style:none;padding:0;gap:var(--s1)}.grader-notes li{font-size:var(--t-1);color:var(--mute)}.grader-notes b{font-weight:600;color:var(--ink)}.grader-before{display:grid;gap:6px;padding:var(--s3) var(--s4);border-radius:14px;border:1.5px dashed color-mix(in srgb,var(--ink) 20%,transparent);color:var(--mute)}.grader-before span{font:600 12px/1.2 var(--sans);letter-spacing:.06em;text-transform:uppercase}.grader-before s{text-decoration-color:#ff6b4ab3}.result .grader-rewrites{display:grid;gap:var(--s3)}.grader-rewrites .rewrite{box-shadow:inset 4px 0 0 var(--c);animation:fun-rise .6s var(--ease) calc(var(--n, 0) * .26s) both}.grader-rewrites .rewrite:nth-child(1){--c: var(--fun-l3)}.grader-rewrites .rewrite:nth-child(2){--c: var(--fun-l7)}.grader-rewrites .rewrite:nth-child(3){--c: var(--fun-l6)}.result .fun-sticker.grader-underused{max-width:34em;font-size:var(--t1);line-height:1.35}@media(prefers-reduced-motion:reduce){.grader-card,.grader-swap>*,.grader-card mark,.grader-bars li>span{transition:none!important}.grader-bars .fun-seg i{scale:1 1}.grader-foot p>*{opacity:1;animation:none!important}.grader-claim-head .fun-pill,.grader-meter i,.grader-rewrites .rewrite{animation:none!important}}