/* microhelper.ru: dark indigo app-like theme, mobile first. Star rules .r0..r50 at the end are generated (width = N*2%). */
:root{color-scheme:dark;--bg:#14112e;--surface:#1f1a47;--tile:#2a2652;--tile-2:#3d3777;--line:#4a4390;--edge:#8a82d6;--fg:#f4f2ff;--muted:#c9c5ee;--primary:#ffa726;--on-primary:#1b1200;--cta-1:#ffa726;--cta-2:#f7931e;--link:#ffc46b;--accent:#d92b55;--on-accent:#ffffff;--star:#ffa726;--star-empty:#7d77bd;--danger:#ff9aa8;--ok:#7be3a8;
--gold-1:#f7c548;--gold-2:#d9901a;--gold-fg:#1f1400;--silver-1:#e6e8f6;--silver-2:#aab0cc;--silver-fg:#1b1a33;--bronze-1:#ebab74;--bronze-2:#c9743a;--bronze-fg:#1a0d04;--violet-1:#4d42a2;--violet-2:#6155b9}
:root{--g-hero:linear-gradient(135deg,var(--violet-1),var(--violet-2));--g-gold:linear-gradient(145deg,var(--gold-1),var(--gold-2));--g-silver:linear-gradient(145deg,var(--silver-1),var(--silver-2));--g-bronze:linear-gradient(145deg,var(--bronze-1),var(--bronze-2));--g-cta:linear-gradient(135deg,var(--cta-1),var(--cta-2));--g-best:linear-gradient(135deg,var(--cta-1),var(--accent));--g-tile:linear-gradient(135deg,var(--tile),var(--tile-2));
--r-s:.75rem;--r-m:1rem;--r-l:1.25rem;--sh:0 .6rem 1.5rem rgba(8,6,28,.45);--tab-h:4rem;--bar-h:3.5rem;--cta-h:4rem;
--ico-chevron:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m9 5 7 7-7 7'/%3E%3C/svg%3E");
--ico-chat:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23000'%3E%3Cpath d='M12 3C6.5 3 2.5 6.6 2.5 11c0 2.4 1.100 4.400 3 5.800L5 21.500l4.600-2.300c.7.100 1.500.2 2.400.2 5.500 0 9.500-3.600 9.500-8.200S17.500 3 12 3z'/%3E%3C/svg%3E")}
*,*::before,*::after{box-sizing:border-box}
html{font-size:100%;-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;min-height:100vh;display:flex;flex-direction:column;overflow-wrap:anywhere;color:var(--fg);font:clamp(1rem,.96rem + .2vw,1.0625rem)/1.55 system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;background:radial-gradient(48rem 26rem at 100% -4%,rgba(160,150,245,.3),transparent 65%),radial-gradient(40rem 30rem at -12% 38%,rgba(185,181,246,.16),transparent 65%),radial-gradient(36rem 26rem at 105% 82%,rgba(150,140,240,.16),transparent 65%),var(--bg);background-repeat:no-repeat;padding-bottom:calc(var(--tab-h) + env(safe-area-inset-bottom))}
[id]{scroll-margin-top:calc(var(--bar-h) + 1rem)}
[hidden]{display:none!important}
img{max-width:100%;height:auto}
a{color:var(--link);text-underline-offset:.15em}
a:hover{text-decoration-thickness:2px}
:focus-visible{outline:3px solid #fff;outline-offset:2px;box-shadow:0 0 0 5px var(--bg)}
h1{font-size:clamp(1.5rem,1.15rem + 1.6vw,2.25rem);line-height:1.2;margin:.25rem 0 .75rem}
h2{font-size:clamp(1.2rem,1.1rem + .6vw,1.5rem);line-height:1.25;margin:1.5rem 0 .75rem}
h3{font-size:1.1rem;margin:1.5rem 0 .5rem}
h4{font-size:1.05rem;margin:1.25rem 0 .5rem}
p,ul,ol,blockquote{margin:0 0 1rem}
.container{width:100%;max-width:72rem;margin-inline:auto;padding-inline:clamp(1rem,4vw,2rem)}
main{flex:1;padding-block:1rem 2rem}
.vh{position:absolute!important;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}
.skip{position:absolute;left:.5rem;top:-4rem;z-index:50;background:var(--cta-1);color:var(--on-primary);padding:.75rem 1rem;border-radius:var(--r-s);font-weight:700}
.skip:focus{top:.5rem}
.lead{color:var(--muted);max-width:48rem}
/* app bar: nav-row (wide) and details.menu (narrow) carry the same links */
.site-header{position:sticky;top:0;z-index:20;min-height:var(--bar-h);padding-top:env(safe-area-inset-top);background:rgba(20,17,46,.92);box-shadow:0 1px 0 var(--line)}
@supports (backdrop-filter:blur(1px)){.site-header{background:rgba(20,17,46,.78);backdrop-filter:blur(12px)}}
.bar{display:flex;align-items:center;justify-content:space-between;min-height:var(--bar-h)}
.brand{display:inline-flex;align-items:center;gap:.6rem;min-height:2.75rem;font-weight:800;font-size:1.1rem;letter-spacing:.01em;color:var(--fg);text-decoration:none}
.brand svg{flex:none}
.bar nav{position:static}
.nav-row{display:none;list-style:none;margin:0;padding:0;gap:.25rem}
.nav-row a,.menu-list a{display:flex;align-items:center;min-height:2.75rem;padding:.25rem .9rem;color:var(--fg);text-decoration:none;border-radius:var(--r-s);font-weight:600}
.nav-row a:hover,.menu-list a:hover{background:var(--tile)}
.menu{display:block}
.menu summary{list-style:none;cursor:pointer;display:flex;align-items:center;justify-content:center;width:2.75rem;height:2.75rem;border-radius:50%;background:rgba(255,255,255,.1);box-shadow:inset 0 0 0 1px rgba(255,255,255,.28)}
.menu summary::-webkit-details-marker{display:none}
.burger-icon,.burger-icon::before,.burger-icon::after{display:block;width:1.25rem;height:2px;border-radius:2px;background:var(--fg);content:"";position:relative}
.burger-icon::before{position:absolute;top:-.4rem}
.burger-icon::after{position:absolute;top:.4rem}
.menu-list{position:absolute;inset-inline:.75rem;top:calc(100% + .35rem);list-style:none;margin:0;padding:.5rem;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-m);box-shadow:var(--sh)}
/* bottom tab bar */
.tabbar{position:fixed;inset:auto 0 0;z-index:40;height:calc(var(--tab-h) + env(safe-area-inset-bottom));padding-bottom:env(safe-area-inset-bottom);background:var(--g-tile);box-shadow:0 -1px 0 var(--line),0 -.5rem 1.5rem rgba(8,6,28,.4)}
.tabbar ul{list-style:none;margin:0;padding:.25rem;height:var(--tab-h);display:grid;grid-auto-flow:column;grid-auto-columns:1fr;gap:.25rem}
.tab{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.15rem;height:3.5rem;border-radius:var(--r-s);color:var(--muted);font-size:.75rem;font-weight:600;line-height:1.1;text-decoration:none}
.tab svg{flex:none}
.tab[aria-current]{color:var(--primary);background:rgba(255,167,38,.16)}
@media (min-width:56.25em){.tabbar{display:none}.nav-row{display:flex}.menu{display:none}body{padding-bottom:0}.container{max-width:60rem}}
/* breadcrumbs */
.crumbs{margin:0 0 .5rem;font-size:.9rem}
.crumbs ol{list-style:none;display:flex;flex-wrap:wrap;gap:.25rem;margin:0;padding:0;color:var(--muted)}
.crumbs li{display:inline-flex;align-items:center}
.crumbs li+li::before{content:"›";margin-inline:.25rem}
.crumbs a,.crumbs span{display:inline-flex;align-items:center;min-height:2.75rem}
.crumbs [aria-current]{font-weight:700;color:var(--fg)}
/* buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;min-height:2.75rem;padding:.55rem 1.1rem;border:1px solid var(--line);border-radius:var(--r-s);background:var(--g-tile);color:var(--fg);font:inherit;font-weight:700;text-decoration:none;cursor:pointer;text-align:center}
.btn-primary{background:var(--g-cta);color:var(--on-primary);border-color:transparent;box-shadow:0 .25rem .9rem rgba(247,147,30,.3)}
.btn:hover{filter:brightness(1.1)}
.btn:active{transform:scale(.98)}
.actions{display:flex;flex-wrap:wrap;gap:.6rem;margin:.9rem 0 0}
.badge-demo{display:inline-block;margin-inline-start:.4rem;padding:.05rem .55rem;border-radius:1rem;background:var(--tile);color:var(--muted);font-size:.75rem;font-weight:700;vertical-align:middle}
/* stars: ::before grey, ::after amber with width from .rN classes */
.stars{position:relative;display:inline-block;font-size:1.2rem;line-height:1;letter-spacing:.06em;white-space:nowrap;vertical-align:middle}
.stars::before{content:"★★★★★";color:var(--star-empty)}
.stars::after{content:"★★★★★";color:var(--star);position:absolute;left:0;top:0;overflow:hidden;white-space:nowrap;width:0}
.rating-line{display:flex;flex-wrap:wrap;align-items:center;gap:.3rem .7rem;margin:.4rem 0}
.rating-num{font-size:1.1rem}
.count{color:var(--muted)}
.rating-line .count::before{content:"";display:inline-block;width:1em;height:1em;margin-inline-end:.35em;vertical-align:-.12em;background:currentColor;-webkit-mask:var(--ico-chat) center/contain no-repeat;mask:var(--ico-chat) center/contain no-repeat}
/* hero */
.hero{margin:.25rem 0 1rem;padding:1.25rem;border-radius:var(--r-l);background:radial-gradient(circle at 100% 0,rgba(255,255,255,.1),transparent 45%),var(--g-hero);box-shadow:var(--sh)}
.hero h1{margin:0 0 .5rem}
.hero .lead{color:var(--fg);max-width:40rem}
.hero .lead>:last-child{margin-bottom:0}
.hero a{color:var(--fg)}
.chips{display:flex;flex-wrap:wrap;gap:.5rem;list-style:none;margin:1rem 0 0;padding:0}
.chips li{padding:.3rem .8rem;border-radius:999px;background:rgba(20,17,46,.5);box-shadow:inset 0 0 0 1px rgba(255,255,255,.25);font-size:.875rem;font-weight:700}
/* ranking: podium cards */
.ranking{list-style:none;margin:1.25rem 0;padding:0;display:grid;gap:.9rem}
.card{position:relative;padding:1.1rem;border-radius:var(--r-l);background:var(--surface);box-shadow:var(--sh)}
.card h2{margin:0;font-size:1.3rem}
.card p{margin:.4rem 0}
.card-head{display:flex;align-items:center;gap:.8rem;padding-inline-end:3.5rem}
.card.gold,.card.silver,.card.bronze{box-shadow:var(--sh),inset 0 0 0 1px rgba(255,255,255,.45)}
.card.gold{background:radial-gradient(circle at 100% 0,rgba(255,255,255,.4),transparent 55%),var(--g-gold);color:var(--gold-fg)}
.card.silver{background:radial-gradient(circle at 100% 0,rgba(255,255,255,.5),transparent 55%),var(--g-silver);color:var(--silver-fg)}
.card.bronze{background:radial-gradient(circle at 100% 0,rgba(255,255,255,.35),transparent 55%),var(--g-bronze);color:var(--bronze-fg)}
.card h2 a{display:inline-flex;align-items:center;min-height:2.75rem;color:inherit;text-decoration:none}
.card h2 a:hover{text-decoration:underline}
.card .btn{background:var(--tile);border-color:transparent;color:var(--fg)}
.card .btn-primary{background:var(--bg);color:var(--link);box-shadow:inset 0 0 0 2px var(--primary)}
.card .rating-line{display:inline-flex;margin:.6rem 0 .2rem;padding:.35rem .8rem;border-radius:999px;background:var(--tile);color:var(--fg)}
.card .count{color:var(--muted)}
.medal{position:absolute;top:.9rem;right:.9rem;display:inline-flex;align-items:center;justify-content:center;width:2.75rem;height:2.75rem;border-radius:50%;background:rgba(255,255,255,.4);box-shadow:inset 0 0 0 2px rgba(255,255,255,.75),0 .2rem .5rem rgba(8,6,28,.25);font-weight:800;font-size:1.25rem}
.logo{flex:none;width:4rem;height:4rem;border-radius:var(--r-s);object-fit:cover;background:var(--tile)}
.logo-ph{display:inline-flex;align-items:center;justify-content:center;font-weight:800;font-size:1.6rem;color:var(--fg);background:var(--g-tile)}
/* ranking: rows 4-10 */
.row{position:relative;display:grid;grid-template-columns:auto 1fr;gap:.1rem .8rem;align-items:center;padding:.8rem 2.75rem .8rem .8rem;border-radius:var(--r-m);background:var(--surface);box-shadow:inset 0 0 0 1px var(--line)}
.row .logo{grid-row:1/3;width:2.75rem;height:2.75rem;font-size:1.15rem}
.row h2{display:flex;align-items:center;gap:.5rem;margin:0;font-size:1.05rem}
.row h2 a{display:inline-flex;align-items:center;min-height:2.75rem;color:var(--fg);text-decoration:none}
.row h2 a::after{content:"";position:absolute;inset:0;border-radius:var(--r-m)}
.row h2 a:focus-visible{outline:none;box-shadow:none}
.row h2 a:focus-visible::after{outline:3px solid #fff;outline-offset:2px;box-shadow:0 0 0 5px var(--bg)}
.row h2 .badge-demo{flex:none;margin:0;white-space:nowrap}
.row-place{flex:none;display:inline-flex;align-items:center;justify-content:center;min-width:2rem;height:2rem;padding-inline:.25rem;border-radius:.6rem;background:var(--tile);color:#fff;font-size:.95rem;font-weight:800}
.row .rating-line{grid-column:2;margin:0}
.row .actions{grid-column:1/-1;margin:.35rem 0 0}
.row .btn{position:relative;z-index:1;font-size:.9rem}
.row .btn-primary{background:transparent;color:var(--link);box-shadow:none;border:2px solid var(--primary)}
.row::after{content:"";position:absolute;right:.9rem;top:1.7rem;width:1.25rem;height:1.25rem;background:var(--link);-webkit-mask:var(--ico-chevron) center/contain no-repeat;mask:var(--ico-chevron) center/contain no-repeat;pointer-events:none}
/* best-site block */
.best-wrap{margin:1.25rem 0}
section.best{display:grid;grid-template-columns:auto 1fr;column-gap:.9rem;align-items:center;margin:0;padding:1.1rem;border:2px solid transparent;border-radius:var(--r-l);background:linear-gradient(var(--tile),var(--surface)) padding-box,var(--g-best) border-box;box-shadow:var(--sh)}
section.best>*{grid-column:1/-1}
section.best>.best-ico{grid-column:1;grid-row:1}
section.best>h2{grid-column:2;grid-row:1}
.best-ico{width:2.75rem;height:2.75rem;padding:.55rem;border-radius:50%;background:rgba(255,255,255,.12);box-shadow:inset 0 0 0 1px rgba(255,255,255,.35);color:var(--primary)}
.best h2{margin:0;font-size:1.2rem}
.best p{margin:.6rem 0 0}
.best-banner{display:flex;flex-wrap:wrap;gap:.4rem;align-items:center;margin:.5rem 0 1rem;padding:.55rem 1rem;border-radius:999px;background:var(--bg);box-shadow:inset 0 0 0 2px var(--accent);font-weight:700}
.best-banner span[aria-hidden]{color:var(--primary)}
/* site card page */
.site-hero{display:grid;grid-template-columns:auto 1fr;gap:0 .9rem;align-items:center;margin:.25rem 0 1rem;padding:1.1rem;border-radius:var(--r-l);background:radial-gradient(circle at 100% 0,rgba(255,255,255,.1),transparent 45%),var(--g-hero);box-shadow:var(--sh)}
.site-hero>*{grid-column:1/-1}
.site-hero>.logo{grid-column:1;width:4rem;height:4rem}
.site-hero>h1{grid-column:2;margin:0;font-size:clamp(1.3rem,1.1rem + 1.2vw,2rem)}
.site-hero .rating-line{margin:.7rem 0 0;padding:.4rem .9rem;border-radius:var(--r-m);background:var(--tile);justify-self:start}
.site-hero .best-banner{margin:.9rem 0 0;justify-self:start}
.panel{margin:1rem 0;padding:1.1rem;border-radius:var(--r-m);background:var(--surface);box-shadow:inset 0 0 0 1px var(--line)}
.panel>h2:first-child{display:flex;align-items:center;gap:.6rem;margin:0 0 .8rem;font-size:1.1rem}
.panel>h2:first-child::before{content:"";flex:none;width:.3rem;height:1.2em;border-radius:.2rem;background:var(--g-cta)}
.prose>:last-child{margin-bottom:0}
.prose h3,.prose h4{margin-top:1.25rem}
.prose img{border-radius:var(--r-s)}
.prose blockquote{border-inline-start:4px solid var(--primary);padding-inline-start:1rem;color:var(--muted)}
.prose code{background:var(--tile);padding:.1rem .35rem;border-radius:.35rem}
.gallery{display:flex;gap:.75rem;margin:1rem 0 0;padding:0 0 .75rem;list-style:none;overflow-x:auto;scroll-snap-type:x mandatory;overscroll-behavior-x:contain;-webkit-overflow-scrolling:touch;scrollbar-width:thin;scrollbar-color:var(--primary) var(--tile)}
.gallery li{flex:0 0 86%;scroll-snap-align:center}
.gallery figure{margin:0}
.gallery img{display:block;width:100%;height:auto;border-radius:var(--r-s);box-shadow:inset 0 0 0 1px var(--line)}
.gallery figcaption{font-size:.9rem;color:var(--muted);margin-top:.35rem}
.reviews-list{list-style:none;margin:0 0 1rem;padding:0;display:grid;gap:.75rem}
.reviews-list>li>.btn{width:100%;justify-content:flex-start}
.review{padding:.9rem 1rem;border-radius:var(--r-s);background:var(--tile);box-shadow:inset 0 0 0 1px var(--line)}
.review header{display:flex;flex-wrap:wrap;align-items:center;gap:.25rem .75rem}
.review time{color:var(--muted);font-size:.9rem}
.review-body{white-space:pre-line;margin:.5rem 0 0}
.tag{display:inline-block;padding:.05rem .6rem;border-radius:1rem;background:var(--accent);color:var(--on-accent);font-size:.78rem;font-weight:700}
.pager{display:flex;align-items:center;justify-content:space-between;gap:.75rem;margin:.5rem 0 1rem}
.pager .btn{border-radius:999px}
.empty{padding:1.25rem;border:1px dashed var(--line);border-radius:var(--r-m);background:rgba(255,255,255,.04);color:var(--muted)}
main>article.page{padding:1.25rem;border-radius:var(--r-l);background:var(--surface);box-shadow:inset 0 0 0 1px var(--line)}
/* review form */
.review-form{display:grid;gap:1rem;max-width:36rem;margin-top:1rem}
.field label,.star-input legend{display:block;font-weight:700;margin-bottom:.3rem}
.field input,.field textarea{width:100%;min-height:3rem;padding:.6rem .85rem;font:inherit;font-size:1rem;color:var(--fg);background:var(--tile);border:2px solid var(--edge);border-radius:var(--r-s)}
.field input:focus,.field textarea:focus{border-color:var(--primary)}
.field textarea{min-height:8rem;resize:vertical}
.error{color:var(--danger);font-weight:700;margin:.25rem 0 0}
.notice{padding:.8rem 1rem;border-radius:var(--r-s);background:var(--tile);box-shadow:inset 0 0 0 2px var(--ok);color:var(--ok);font-weight:700}
.notice.is-error{box-shadow:inset 0 0 0 2px var(--danger);color:var(--danger)}
.star-input{border:0;margin:0;padding:0;display:flex;flex-direction:row-reverse;flex-wrap:wrap;justify-content:flex-end;gap:.4rem}
.star-input legend{float:left;width:100%;padding:0}
.star-input input{position:absolute;opacity:0;width:1px;height:1px}
.star-input label{display:inline-flex;align-items:center;justify-content:center;width:3rem;height:3rem;border-radius:var(--r-s);background:var(--tile);box-shadow:inset 0 0 0 1px var(--edge);font-size:1.7rem;line-height:1;color:var(--star-empty);cursor:pointer;margin:0}
.star-input input:checked~label,.star-input label:hover,.star-input label:hover~label{color:var(--star);box-shadow:inset 0 0 0 2px var(--primary)}
.star-input input:focus-visible+label{outline:3px solid #fff;outline-offset:2px;box-shadow:0 0 0 5px var(--bg)}
.hp{position:absolute!important;left:-9999px;top:auto;width:1px;height:1px;overflow:hidden}
.review-form .btn-primary{width:100%;min-height:3rem}
/* sticky call to action: above the tab bar, small screens only */
.cta-bar{position:fixed;inset-inline:0;bottom:calc(var(--tab-h) + env(safe-area-inset-bottom));z-index:30;display:flex;align-items:center;min-height:var(--cta-h);padding:.5rem 1rem;background:rgba(20,17,46,.94)}
@supports (backdrop-filter:blur(1px)){.cta-bar{background:rgba(20,17,46,.8);backdrop-filter:blur(10px)}}
.cta-bar .btn{flex:1;min-height:3rem}
body:has(.cta-bar) .site-footer{padding-bottom:calc(var(--cta-h) + 1.25rem)}
@media (min-width:56.25em){.cta-bar{display:none}body:has(.cta-bar) .site-footer{padding-bottom:1.5rem}}
/* footer */
.site-footer{margin-top:1rem;padding-block:1.25rem;color:var(--muted);font-size:.95rem;box-shadow:0 -1px 0 var(--line)}
.footer-nav ul{list-style:none;display:flex;flex-wrap:wrap;gap:0 1rem;margin:0 0 .5rem;padding:0}
.footer-nav a{display:inline-flex;align-items:center;min-height:2.75rem;color:var(--link)}
.site-footer p{margin:0}
@media (min-width:48em){
.gallery{display:grid;grid-template-columns:repeat(2,1fr);overflow:visible;padding-bottom:0}
.gallery li{flex:none}
}
@media (min-width:56.25em){
.ranking{grid-template-columns:repeat(3,1fr);gap:1rem}
.ranking>.row{grid-column:1/-1}
.card-head{flex-direction:column;align-items:flex-start;padding-inline-end:0}
.card .rating-line{gap:.2rem .5rem;padding:.3rem .7rem}
.card .stars{font-size:1.05rem}
.row{grid-template-columns:auto 1fr auto;padding-block:.9rem}
.row .actions{grid-column:3;grid-row:1/3;margin:0}
.row .btn{margin-inline-end:.5rem}
.row::after{top:50%;margin-top:-.625rem}
.hero{padding:1.75rem 2rem}
.site-hero{padding:1.5rem 2rem}
.panel{padding:1.5rem 1.75rem}
}
@media (prefers-reduced-motion:no-preference){
.btn,.nav-row a,.menu-list a,.tab{transition:background-color .15s,filter .15s,transform .1s}
.ranking>.card{animation:rise .5s ease-out both}
.ranking>.place-2{animation-delay:.04s}
.ranking>.place-3{animation-delay:.08s}
@keyframes rise{from{transform:translateY(.75rem)}to{transform:none}}
}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
/* stars: fill width = N*2% (N = rating in tenths) */
.r0::after{width:0}.r1::after{width:2%}.r2::after{width:4%}.r3::after{width:6%}.r4::after{width:8%}
.r5::after{width:10%}.r6::after{width:12%}.r7::after{width:14%}.r8::after{width:16%}.r9::after{width:18%}
.r10::after{width:20%}.r11::after{width:22%}.r12::after{width:24%}.r13::after{width:26%}.r14::after{width:28%}
.r15::after{width:30%}.r16::after{width:32%}.r17::after{width:34%}.r18::after{width:36%}.r19::after{width:38%}
.r20::after{width:40%}.r21::after{width:42%}.r22::after{width:44%}.r23::after{width:46%}.r24::after{width:48%}
.r25::after{width:50%}.r26::after{width:52%}.r27::after{width:54%}.r28::after{width:56%}.r29::after{width:58%}
.r30::after{width:60%}.r31::after{width:62%}.r32::after{width:64%}.r33::after{width:66%}.r34::after{width:68%}
.r35::after{width:70%}.r36::after{width:72%}.r37::after{width:74%}.r38::after{width:76%}.r39::after{width:78%}
.r40::after{width:80%}.r41::after{width:82%}.r42::after{width:84%}.r43::after{width:86%}.r44::after{width:88%}
.r45::after{width:90%}.r46::after{width:92%}.r47::after{width:94%}.r48::after{width:96%}.r49::after{width:98%}
.r50::after{width:100%}