.mascot { width:48px; height:48px; display:inline-block; flex:none; vertical-align:middle; overflow:visible; cursor:pointer; transform-origin:50% 65%; --m-eye:#0F1222;--m-glint:#F5F6FA }
.s36 {width:36px;height:36px} .s40 {width:40px;height:40px} .s120 {width:120px;height:120px}
.s16 {width:16px;height:16px} .s24 {width:24px;height:24px} .s48 {width:48px;height:48px} .s96 {width:96px;height:96px} .s160 {width:160px;height:160px} .s192 {width:192px;height:192px} .s240 {width:240px;height:240px}
.mascot[data-mascot="zidos"] {--m-color:#A6E83A;--m-eye:#0F1222;--m-glint:#F5F6FA;--m-detail:#7BBC20}
.mascot[data-mascot="scout"] {--m-color:#627BF3;--m-detail:#3B52CC}
.mascot[data-mascot="builder"] {--m-color:#D96E20;--m-detail:#BA5104}
.mascot[data-mascot="reviewer"] {--m-color:#0A9484;--m-detail:#087A6E}
.mascot[data-mascot="writer"] {--m-color:#E0503F;--m-detail:#C44033}
.mascot[data-mascot="ops"] {--m-color:#B08212;--m-detail:#8E6600}
.m-body,.m-foot {fill:var(--m-color)} .m-cheek {fill:var(--m-detail)} .m-glint {fill:var(--m-glint)} .m-eye-shape {fill:var(--m-eye)}
[data-theme="light"] .mascot[data-mascot="zidos"],.mascot[data-theme="light"][data-mascot="zidos"] {--m-color:#5C9A00;--m-detail:#4B8300}
.mascot:focus {outline:none}
.mascot:focus-visible {background-color:#272C40;border-radius:12px}
[data-theme="light"] .mascot:focus-visible,.mascot[data-theme="light"]:focus-visible {background-color:#E0E4EC}

.m-pupil {fill:#0F1222}