.cm{--b:var(--cb,1.5px solid #000);--gap:20px}
.cm a{color:#000}
.cm .muted{color:#555}.cm .sm{font-size:13px}
.cm .n{font:900 24px/1 var(--dot);font-variation-settings:"ROND" 100}
.cm p,.cm h1,.cm h2,.cm h3,.cm li,.cm td,.cm .crumbs{overflow-wrap:anywhere}
.cm-bh>div,.cm-lay>*{min-width:0}
.cm-mono,.cm .hint,.cm-by,.cm-ft,.cm-meta,.cm-more,.cm-bar,.cm-tabs a,.cm-q th,.cm label,.cm legend,.cm-chk{font-family:var(--mono)}
.cm [hidden]{display:none!important}
.sr{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* community bar: a terminal prompt + every community destination (shows on phones too) */
.cm-bar{border-bottom:var(--rule,1px dashed #000);background:#fff}
.cm-bar .wrap{display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 22px;padding-top:12px;padding-bottom:10px}
.cm-bar-p{margin:0;font:600 13.5px/1.5 var(--mono);display:flex;align-items:center;gap:8px}
.cm-bar-p .pr{font-weight:700}
.cm-bar nav{display:flex;flex-wrap:wrap;gap:4px 18px;align-items:baseline;margin-left:auto}
.cm-bar nav a,.cm-bar nav button{font:500 13.5px/1.5 var(--mono);color:#000;text-decoration:none;background:none;border:0;padding:0;cursor:pointer}
.cm-bar nav a:hover,.cm-bar nav button:hover,.cm-bar nav a[aria-current]{text-decoration:underline;text-underline-offset:3px}
.cm-bar nav a[aria-current]{font-weight:700}
.cm-bar nav form{margin:0;display:inline}
.cm-bar-n{flex-basis:100%;margin:0;font:400 12px/1.5 var(--mono);color:#555}

.cm .crumbs{margin:22px 0 30px}
.cm-side .cframe h2:not(.cc-t):not(.sr){font-size:20px;line-height:1.25;margin:4px 0 8px}
/* section heads reuse the site's .glog-h (mono, dashed rule) */
.cm-h{margin:34px 0 16px!important}
.cm-main>.cm-h:first-child{margin-top:0!important}

/* terminal blocks (.cc from the site): a touch more room in the community */
.cm .cm-term{margin:22px 0 14px}
.cm-term .cc-l .x a{color:#000}
.cm-term + p .btn,.cm-term + .cm-acts{margin-top:4px}

/* frames: the site's .cframe; tighten rhythm between them */
.cm .cframe{margin:26px 0 var(--gap)}
.cm-side>.cframe:first-child,.cm-main>.cframe:first-child,.cm .cframe.cm-tool{margin-top:0}
.cm .cframe.cm-act{margin-top:34px}
.cm .cframe>.cc-t+*{margin-top:2px}
.cm .cframe>:last-child{margin-bottom:0}
.cm .cframe h2:not(.cc-t),.cm .cframe h3{font-family:var(--sans);font-weight:650;letter-spacing:-.01em}

/* whole-box links: <a class="stretch"> covers the box; other links/buttons inside sit above it */
.cm-tap{position:relative}
.cm-tap a.stretch{text-decoration:none}
.cm-tap a.stretch::after{content:"";position:absolute;inset:0;z-index:1}
.cm-tap :is(a:not(.stretch),button,form,input,label){position:relative;z-index:2}
.cm-tap:hover{box-shadow:inset 0 0 0 1px #000}
.cm-tap:hover a.stretch{text-decoration:underline;text-underline-offset:3px}
.cm-tap a.stretch:focus-visible{outline:none}
.cm-tap:focus-within{outline:2px solid #000;outline-offset:3px}
li.cm-tap:hover{box-shadow:none;background:#f6f6f6}

/* layout */
.cm-lay{display:grid;grid-template-columns:minmax(0,1fr) 330px;gap:28px;align-items:start;margin:18px 0 40px}
.cm-main,.cm-side{min-width:0}
.cm-side{display:flex;flex-direction:column}
.cm-grid2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:22px var(--gap)}
.cm-grid3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px var(--gap)}
.cm-grid2>.cframe,.cm-grid3>.cframe{margin:0}

/* hero */
.cm-hero{display:flex;justify-content:space-between;align-items:flex-end;gap:20px;flex-wrap:wrap;margin:22px 0 8px}
.cm-hero h1{margin:6px 0 10px!important;max-width:820px}
.cm-hero .cm-sub{margin:0;max-width:640px;color:#333}
.cm-prompt{margin:0;font:600 13.5px/1.5 var(--mono)}.cm-prompt .pr{font-weight:700}

/* tabs: mono words, underlined when on */
.cm-tabs{display:flex;gap:22px;border-bottom:var(--b);margin:22px 0 22px;flex-wrap:wrap}
.cm-tabs a{font-size:14px;font-weight:500;color:#555;text-decoration:none;padding:8px 0;margin-bottom:-1.5px;border-bottom:3px solid transparent}
.cm-tabs a:hover{color:#000}
.cm-tabs a.on{color:#000;font-weight:700;border-bottom-color:#000}
.cm-tabs .ct{margin-left:6px;font-weight:400;color:#555}

/* avatars: square, outlined Numpty blobs or GitHub avatars */
.cm-av{width:56px;height:56px;border:var(--b);display:grid;place-items:center;background:#fff;flex:none;overflow:hidden}
.cm-av img{width:80%;height:80%}.cm-av img.gh{width:100%;height:100%}
.cm-av.lg{width:96px;height:96px}
.cm-av.fd{width:36px;height:36px;border-width:1px}
.cm-av.xs{width:30px;height:30px;border-width:1px}

/* build cards */
.cm-bc{display:flex;flex-direction:column;gap:8px}
.cm-bc h3{margin:4px 0 0;font-size:18px;line-height:1.25;overflow-wrap:anywhere}
.cm-bc h3 a{color:#000}
.cm-tl{margin:0;font-size:14.5px;color:#333}
.cm-tags{display:flex;flex-wrap:wrap;gap:6px;align-items:center}
.cm .tag.cm-chip{display:inline-flex;align-items:center;gap:5px;text-decoration:none}
/* in a tag the tile drops its frame (the tag is the frame) but keeps the white square, so dark logos still show on the black hover */
.cm .tag.cm-chip .mono.has-logo{width:16px!important;height:16px!important;padding:1px;border:0}
/* #main: the site's BRAND layer forces every .tag white with :root :is(.tag,...)!important, which was beating this hover */
#main a.tag.cm-chip:is(:hover,:focus-visible){background:#000!important;color:#fff!important}
.cm-more{font-size:12px;color:#555}
.cm-ft{display:flex;align-items:baseline;gap:14px;margin:auto 0 0;padding-top:10px;border-top:var(--rule-row,1px dashed #c8c8c8);font-size:12.5px;color:#555}
.cm-ft .n{font-size:20px;color:#000}
.cm-by{margin-left:auto;color:#000}

/* tool logos (views.js toolIcon, the site's .mono.has-logo tile): greyscale until the row, card or chip they sit in is
   hovered or focused, then full colour with the site's own filter transition (.15s since the anim polish), like the rankings and league tables */
.cm-tap:hover .mono.has-logo img,.cm-tap:focus-within .mono.has-logo img,a.cm-chip:hover .mono.has-logo img,a.cm-chip:focus-visible .mono.has-logo img{filter:none}
/* unranked stack logos (stack_logos.json): their rows and chips aren't links, so colour on hover of the row or chip itself */
.cm-tool:not(.cframe):not(.cm-tap):hover .mono.has-logo img,span.cm-chip:hover .mono.has-logo img{filter:none}
@media(prefers-reduced-motion:reduce){.cm .mono.has-logo img{transition:none}}

/* rows inside sidebar frames (most built with, cheapest stacks, activity): each row is one link */
.cm-rows{list-style:none;margin:6px 0 0;padding:0}
.cm-rows li{display:flex;align-items:center;gap:10px;padding:9px 4px;border-bottom:var(--rule-row,1px dashed #c8c8c8)}
.cm-rows li:last-child{border-bottom:0}
.cm .cm-rows .mono{width:30px!important;height:30px!important;font-size:13px!important;flex:none}
.cm .cm-rows .mono.has-logo{padding:4px}
.cm-rows a.stretch{font-weight:600;color:#000}
.cm-rows .r{margin-left:auto;white-space:nowrap;font:600 13px/1 var(--mono)}
.cm-rows .r .n{font-size:20px}
.cm-feed li{align-items:flex-start}
.cm-feed p{margin:0;font-size:14px}
.cm-feed .when{font:400 12px/1.4 var(--mono);color:#555}

/* build page */
.cm-bh{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:18px;align-items:center}
.cm .cm-bh h1{margin:0!important;font-size:clamp(32px,4.2vw,52px)}
.cm-byl{margin:8px 0 0;font:400 13px/1.7 var(--mono);color:#333;display:flex;flex-wrap:wrap;gap:4px 10px;align-items:center}
.cm-acts{display:flex;gap:10px 16px;align-items:center;flex-wrap:wrap}
.cm-acts form{margin:0}
.cm .btn.on{background:#000!important;color:#fff!important}
.cm .btn .n2{font:900 15px/1 var(--dot);margin-left:2px}
.cm-prose p{margin:0 0 12px;line-height:1.65}
.cm-prose p:last-child{margin:0}
.cm-note p{margin:0 0 8px;line-height:1.6}
.cm-tool{display:flex;align-items:center;gap:10px;padding:10px 4px;border-bottom:var(--rule-row,1px dashed #c8c8c8)}
.cm .cm-tool .mono{width:36px!important;height:36px!important;font-size:15px!important;flex:none}
.cm .cm-tool .mono.has-logo{padding:5px}
.cm-tool a,.cm-tool b{font-weight:600}
.cm-tool .r{font:400 12px/1.4 var(--mono);color:#555;display:block}
.cm-tool .p{margin-left:auto;font:900 18px var(--dot);white-space:nowrap}
.cm-tot{border-top:var(--b);margin-top:2px;padding-top:12px;display:flex;align-items:baseline;font:600 13px var(--mono)}
.cm-tot .p{margin-left:auto;font:900 30px var(--dot)}.cm-tot small{font:600 12px var(--mono);color:#555}
.cm-st{display:grid;grid-template-columns:repeat(3,1fr);margin:0}
.cm-st div{padding:2px 8px;text-align:center;border-right:var(--rule-row,1px dashed #c8c8c8)}
.cm-st div:last-child{border-right:0}
.cm-st .n{display:block;font-size:28px;line-height:1.1;color:#000}
.cm-st span:not(.n){display:block;font:400 12px var(--mono);color:#555}
.cm-links .cc-l .x a{word-break:break-all}

/* chat.log */
.cm-chat{position:sticky;top:20px;display:flex;flex-direction:column;max-height:min(620px,calc(100vh - 40px));min-height:320px}
:root .cm .cframe.cm-chat{padding:0!important}
.cm-chat-h{display:flex;align-items:center;gap:8px;padding:16px 16px 10px;border-bottom:var(--rule-row,1px dashed #c8c8c8);flex-wrap:wrap;font:400 12px var(--mono);color:#555}
.cm-chat-h .cm-live{margin-left:auto;display:flex;align-items:center;gap:6px}
.cm-chat-h .cm-dot{width:8px;height:8px;background:#000;display:inline-block}
.cm-chat-h .cm-live.off .cm-dot{background:#fff;border:1px solid #000}
.cm-msgs{flex:1;overflow-y:auto;list-style:none;margin:0;padding:4px 16px;overscroll-behavior:contain}
.cm-msg{position:relative;display:grid;grid-template-columns:auto 1fr;gap:10px;padding:10px 0;border-bottom:var(--rule-row,1px dashed #c8c8c8)}
.cm-msg:last-child{border-bottom:0}
.cm-msg .cm-meta{font-size:12px;color:#555;display:flex;gap:8px;align-items:baseline;flex-wrap:wrap}
.cm-msg .cm-meta a{font-weight:600;color:#000;font-size:12.5px}
.cm-msg .cm-meta .bdr{border:1px solid #000;padding:0 5px;font-size:11px;color:#000}
.cm-msg .cm-meta .rp{position:absolute;right:0;top:10px;opacity:0;transition:opacity .15s;background:#fff;padding-left:6px}
.cm-msg:hover .cm-meta .rp,.cm-msg:focus-within .cm-meta .rp,.cm-msg .cm-meta .rp.done{opacity:1}
.cm-msg .cm-meta form{margin:0;display:contents}
.cm-msg p{margin:2px 0 0;font-size:14px;line-height:1.45;overflow-wrap:anywhere;white-space:pre-wrap}
.cm-empty{padding:26px 6px;text-align:center;color:#555;font:400 13px/1.5 var(--mono);list-style:none}
.cm-empty img{width:44px;height:44px;display:block;margin:0 auto 8px}
.cm-compose{border-top:var(--b);padding:12px;display:grid;gap:8px}
.cm-compose textarea{width:100%;box-sizing:border-box;padding:9px 11px;font-size:14px!important;line-height:1.4;resize:none;min-height:42px;max-height:120px}
.cm-compose .cm-row{display:flex;align-items:center;gap:8px}
.cm-compose small{font:400 11.5px var(--mono);color:#555}
.cm-compose .cm-row .btn{margin-left:auto}
.cm-gate{border-top:var(--b);padding:14px 16px;font-size:14px;text-align:center}
.cm-gate p{margin:8px 0 0}
.cm-link{background:none;border:0;padding:0;font:500 12px/1.4 var(--mono);color:#555;text-decoration:underline;text-underline-offset:2px;cursor:pointer}
.cm-link:hover{color:#000}
.cm-rep{margin:0;font:400 12.5px var(--mono);color:#555}
.cm-rep form{display:inline;margin:0}

/* notices */
.cm-flag{border:var(--b);padding:12px 16px;margin:14px 0;background:#fff;font-size:14.5px}
.cm-flag::before{content:"# ";font:700 13px var(--mono)}
.cm-flag.wait{border-style:dashed}
.cm-flag.err{font-weight:600}
.cm-err{border:var(--b);padding:10px 14px;font-weight:600;margin:0 0 16px}
.cm-err::before{content:"error: ";font:700 13px var(--mono)}
.cm-err ul{margin:4px 0 0}

/* profile */
.cm-prof{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:22px;align-items:center}
.cm .cm-prof h1{margin:0!important;font-size:clamp(30px,4vw,48px);overflow-wrap:anywhere}
.cm-prof p{margin:6px 0 0}
.cm-prof .cm-st{min-width:260px}
.cm-meta-l{font:400 12.5px/1.8 var(--mono);color:#333;display:flex;flex-wrap:wrap;gap:2px 10px;align-items:center}

/* forms: inputs/selects/textareas already get the site's mono + 1.5px square frame */
.cm-form{display:grid;gap:16px;max-width:760px}
.cm-form label{font-weight:600;font-size:13px;display:block;margin-bottom:6px}
.cm .hint{font-weight:400;color:#555;font-size:12px}
.cm-form input[type=text],.cm-form input[type=email],.cm-form input[type=url],.cm-form textarea,.cm-form select{width:100%;box-sizing:border-box;padding:10px 12px;font-size:14px}
.cm-form textarea{min-height:120px;resize:vertical;font-family:var(--sans)!important;font-size:15px!important;line-height:1.5}
.cm-form fieldset{border:var(--b);padding:16px 16px 18px;margin:0;min-width:0}
.cm-form legend{font:600 13px/1 var(--mono);padding:0 8px}
.cm-trow{display:grid;grid-template-columns:2fr 1.4fr 1.6fr 90px;gap:8px;margin-top:8px}
.cm-trow input,.cm-trow select{padding:8px 10px!important;font-size:13px!important}
.cm-trow.hd span{font:400 12px var(--mono);color:#555}
.cm-chk{display:block!important;font-weight:400!important;font-size:13px!important;line-height:1.5}
.cm-chk input{margin:0 8px 0 0;vertical-align:-2px;accent-color:#000}
.cm-faces{display:flex;flex-wrap:wrap;gap:10px}
.cm-faces label{margin:0;position:relative}
.cm-faces input{position:absolute;opacity:0;inset:0;margin:0;cursor:pointer}
.cm-faces input:focus-visible+img{outline:2px dashed #000;outline-offset:2px}
.cm-faces img{width:44px;height:44px;border:1px solid #000;background:#fff}
.cm-faces input:checked+img{outline:2.5px solid #000;outline-offset:3px}
.cm-form .cf-turnstile{min-height:65px}

/* legal drafts */
.cm-legal{max-width:820px}
.cm .cm-legal h2{font:900 24px/1.1 var(--dot)!important;margin:28px 0 10px}
.cm-legal li{margin:0 0 10px;line-height:1.6}
.cm-legal .cm-flag{margin-top:0}
.cm .btn[disabled]{background:#fff!important;color:#777!important;border-color:#bbb!important;cursor:not-allowed}
.cm section.c{border:var(--b);padding:16px 18px}

/* mod queue tables: the site's table look */
.cm-q{width:100%;border-collapse:collapse;font-size:14px}
.cm-q td,.cm-q th{border-bottom:var(--rule-row,1px dashed #c8c8c8);padding:9px 8px;text-align:left;vertical-align:top}
.cm-q th{font:600 12px var(--mono);color:#555;border-bottom:var(--b)}
.cm-q form{display:inline;margin:0}
.cm-q .btn{padding:6px 10px!important;font-size:12px!important;margin:0 4px 4px 0}
.cm-inv{display:grid;grid-template-columns:2fr 110px auto;gap:12px;align-items:end;max-width:none;margin-bottom:14px}

/* error pages: Numpty + an error.log, like the site's 404 */
.cm-err-page{text-align:center;max-width:680px;margin:20px auto 30px}
.cm-err-page h1{justify-content:center}
.cm-err-page .cc{text-align:left}
.cm-numpty{display:block;margin:0 auto 6px}

/* built with box on tool pages (injected by functions/tool/_middleware.js) */
.cm-bwbox{margin:28px 0}
.cm-bwbox h2{margin:0 0 4px!important;font:650 20px/1.2 var(--sans)!important;letter-spacing:-.01em}
.cm-bwbox .big{display:flex;gap:18px;align-items:baseline;flex-wrap:wrap;margin:8px 0 10px;font:400 13px var(--mono)}
.cm-bwbox .n{font:900 34px/1 var(--dot);font-variation-settings:"ROND" 100}
.cm-bwbox ul{list-style:none;margin:0;padding:0}
.cm-bwbox li{position:relative;padding:8px 4px;border-top:var(--rule-row,1px dashed #c8c8c8)}
.cm-bwbox li a{font-weight:600;color:#000}
.cm-bwbox li a::after{content:"";position:absolute;inset:0}
.cm-bwbox li:hover{background:#f6f6f6}

@media(max-width:900px){
 .cm-lay{grid-template-columns:1fr}
 .cm-chat{position:static;max-height:none}
 .cm-chat .cm-msgs{max-height:420px}
 .cm-grid3,.cm-grid2{grid-template-columns:1fr}
 .cm-bh{grid-template-columns:auto minmax(0,1fr)}.cm-bh .cm-acts{grid-column:1/-1}
 .cm-prof{grid-template-columns:auto minmax(0,1fr)}.cm-prof>div:last-child{grid-column:1/-1}.cm-prof .cm-st{min-width:0}
 .cm-trow{grid-template-columns:1fr 1fr}.cm-trow.hd{display:none}
 .cm-msg .cm-meta .rp{opacity:1}
 .cm-inv{grid-template-columns:1fr 90px}
 .cm-inv p{grid-column:1/-1}
}
@media(max-width:640px){
 .cm-bar nav{margin-left:0;flex-basis:100%}
 .cm-hero .btn{width:100%}
 .cm-q{font-size:13px}
 .cm-q thead{display:none}
 .cm-q tr{display:block;padding:10px 12px;margin-bottom:10px}
 .cm-q td{display:block;border:0!important;padding:3px 0}
}

/* ---- round 2: screenshots, build log, threads, notifications, collections ---- */
.cm .cm-thumb{display:block;width:100%;height:auto;aspect-ratio:16/9;object-fit:cover;object-position:top;border:1px solid #000;margin:0 0 10px;background:#f4f4f4}
.cm-shots{list-style:none;margin:0;padding:0;display:grid;gap:12px;grid-template-columns:repeat(2,1fr)}
.cm-shots.c1{grid-template-columns:1fr}
.cm-shots li{position:relative;margin:0}
.cm-shots img{display:block;width:100%;height:auto;border:1px solid #000;background:#f4f4f4}
.cm-shots:not(.manage) img{aspect-ratio:16/10;object-fit:cover;object-position:top}
.cm-shots.c1 img{aspect-ratio:auto}
.cm-shots .cm-cap{display:block;font:400 12px/1.4 var(--mono);color:#555;margin-top:5px}
.cm-shots.manage{grid-template-columns:repeat(4,1fr);margin-bottom:16px}
.cm-shots.manage form{margin:4px 0 0}
.cm-upd{padding:12px 0;border-bottom:var(--rule-row,1px dashed #c8c8c8)}
.cm-upd:first-of-type{padding-top:2px}
.cm-upd-h{margin:0;display:flex;gap:10px;align-items:baseline;flex-wrap:wrap}
.cm-upd-h time{font:600 12.5px/1 var(--mono);border:1px solid #000;padding:3px 6px}
.cm-upd-h form{display:inline;margin:0 0 0 auto}
.cm-upd .cm-prose{margin-top:6px;font-size:14.5px}
.cm-upd .cm-prose p{margin:0 0 6px}
.cm .cm-upd-f{margin-top:14px;padding-top:14px;border-top:1.5px solid #000}
.cm-replies{list-style:none;margin:6px 0 0;padding:0 0 0 12px;border-left:1.5px solid #000}
.cm-replies:empty{display:none}
.cm-msg.cm-reply{padding:7px 0;border-bottom:0;grid-template-columns:auto 1fr}
.cm-reply .cm-av.xs img{width:22px;height:22px}
.cm-msg .cm-re{font:400 11.5px/1.3 var(--mono);color:#555;margin:2px 0 0}
.cm-msg .rpl{font-size:12px;margin-top:3px;color:#555}
.cm-reply .cm-meta .rp{position:static;padding:0;margin-left:auto;background:none}
.cm-msg .rpl:hover{color:#000}
.cm-replying{margin:0 0 6px;font:400 12px/1.4 var(--mono);display:flex;gap:8px;align-items:center}
.cm-replying[hidden]{display:none}
.cm-check{margin:6px 0}
.cm-feed li.cm-new{background:#f4f4f4}
.cm-notes a.stretch{font-weight:400}
.cm-feed li.cm-new .tag{font-size:10.5px}
.cm-ci{display:flex;flex-direction:column;gap:6px}
.cm-ci>.cm-bc{flex:1}
.cm-inote{margin:0;font:400 12.5px/1.45 var(--mono);color:#333}
.cm-ci form{margin:0}
.cm .cm-inline{display:flex;gap:10px;align-items:flex-end;flex-wrap:wrap;margin:14px 0 26px}
.cm .cm-inline label{width:100%;margin:0}
.cm .cm-inline input[type=text]{flex:1;min-width:180px}
.cm .cm-cadd{margin-top:12px;gap:10px}
.cm-one>.cframe{margin:0;max-width:560px}
@media (max-width:640px){
 .cm-shots,.cm-shots.manage{grid-template-columns:1fr 1fr}
 .cm-upd-h form{margin-left:0}
}
/* anim-polish: the heading prompt's cursor (one per page, layout.js oneCursor), black $ prompts, clickable cards thicken
   1.5px over .15s like the site's, and 'pouring a pint...' on a .btn while its form submits (client.js). calm for reduced motion */
.cm-prompt .cc-cur{margin-left:.35ch}
:root .cm span.pr[aria-hidden="true"],:root .cm-bar-p .pr{color:#000}
:root .cframe.cm-tap.cm-tap:not(li){box-shadow:inset 0 0 0 0 #000!important;transition:box-shadow .15s ease}
:root .cframe.cm-tap.cm-tap:not(li):hover{box-shadow:inset 0 0 0 1.5px #000!important}
.btn.cm-busy{cursor:progress}
.btn.cm-busy::after{content:"...";display:inline-block;width:3ch;margin-left:-6px;overflow:hidden;white-space:nowrap;vertical-align:top;text-align:left}
@media (prefers-reduced-motion:no-preference){.btn.cm-busy::after{animation:cm-dots 1.2s steps(4,jump-none) infinite}}
@keyframes cm-dots{from{width:0}to{width:3ch}}