Haven't a clue where to start. Want to have a sample CSS file from the project.

[NickoJow]

Hey, developer! I just downloaded this addon the other day, but had quite a bit of problem with the initial editor.css file. So I tried to find one from the Anki forum, but I still had no clue. At the same time, I find the demo picture you posted is amazing, which makes me wondering, whether you could be so kind to share that file as a default styling or as a starting point. Thaaaanks!

[oakkitten]

You can use the Inspector add-on to find useful selectors. But here's my CSS that I use to de-fancify the Editor, since I prefer the clean look of Anki 2.1.49.

body {
    --custom-border-color: #a0a0a0;
    --custom-focus-color: #ef9700;
    --custom-label-font-color: #000 /*#727272*/;
    --custom-label-font-size: var(--base-font-size);
}

body .night_mode {
    --custom-border-color: #222222;
    --custom-focus-color: #5e8eac;
    --custom-label-font-color: #a0a0a0;
}

/**************************************************************************************/

/* align buttons horisontally to be in line with fields, 
   add spacing to the right and below of each group */
.button-group {padding: 0 4px 4px 0 !important; margin: 0 !important;}

/* pretend that the above padding doesn't exist when we are not scrolling */
.fields > * {position: relative; top: -4px;}

/* horizontal padding of 1 pixel is needed to draw the field focus indicator,
   which is is 2 pixels wide, overlapping the 1 pixel thick border;
   setting grid-gap to 0 removes excessive vertical space between fields */
.fields {padding: 1px 0 !important; grid-gap: 0 !important;}

/* why so many things have margins and paddings? */
.container {padding: 0 !important;}

/* remove the overflow indicators (black lines on top and bottom of fields);
   while they kind of help, they are way too ugly */
.sticky-container {border: none !important}

/**************************************************************************************/

/* do not draw border around the element containing the input field and its label */
.editor-field {border: none !important;}
.editor-field {box-shadow: none !important;}

/* instead, draw border and focus indicator for the input field only */
.editing-area {
    border: 1px solid var(--custom-border-color) !important; 
    border-radius: 5px !important;
}
.editing-area:focus-within {
    border-color: var(--custom-focus-color) !important; 
    box-shadow: 0 0 0 1px var(--custom-focus-color) !important;
}

/* remove the dotted line, tweak label color, text size and the size of the small icons;
   do not show the icons if the mouse isn't over the field */
.label-container {border: none !important; font-size: var(--custom-label-font-size);}
.label-container .label-name {color: var(--custom-label-font-color) !important}
.label-container .field-state {height: 1em !important; opacity: 0%}
.label-container span {--icon-align: middle !important}
.editor-field:hover .field-state {opacity: 100%}

/**************************************************************************************/

/* tweak the tag area to remove unnecessary empty space,
   replace the icon with the word “Tags” */
.tag-editor-area {margin: 0 !important; padding: 2px 0 0 1px !important;}
.tag-options-button {padding: 0 !important}
.tag-options-button div {display: none;}
.tag-options-button::after {
    content: "Tags"; 
    font-size: var(--custom-label-font-size); 
    color: var(--custom-label-font-color);
    padding-right: 2px;
}

/* slightly raise the text in the tag button so it appears centered */
.tag-relative button > span:nth-child(1) {line-height: 1; padding: 0.2em 0 0.3em 0;}

/**************************************************************************************/

.fields {display: inline-block !important; padding: 0 !important; margin-inline: -1px !important;}
.fields > div {display: inline-block !important; padding: 0px 2px !important}

[notetype="tango"] .fields > div:nth-child(1) {width: 40%}
[notetype="tango"] .fields > div:nth-child(2) {width: 20%}
[notetype="tango"] .fields > div:nth-child(3) {width: 40%}
[notetype="tango"] .fields > div:nth-child(4) {width: 100%}
[notetype="tango"] .fields > div:nth-child(5) {width: calc(100% - 2em)}
[notetype="tango"] .fields > div:nth-child(6) {width: 2em}
[notetype="tango"] .fields > div:nth-child(6) .label-container {display: none;}

[notetype="kanji"] .fields > div:nth-child(1) {width: 75px; float: left;}
[notetype="kanji"] .fields > div:nth-child(2) {width: calc(40% - 75px); float: left;}
[notetype="kanji"] .fields > div:nth-child(3) {width: 60%; float: left;}
[notetype="kanji"] .fields > div:nth-child(4) {width: 70%; float: left;}
[notetype="kanji"] .fields > div:nth-child(5) {width: calc(30% - 75px); float: left;}
[notetype="kanji"] .fields > div:nth-child(6) {width: 100%}
[notetype="kanji"] .fields > div:nth-child(7) {width: 100%}
[notetype="kanji"] .fields > div:nth-child(8) {width: 100%}
[notetype="kanji"] .fields > div:nth-child(9) {width: calc(100% - 75px); float: left;}
[notetype="kanji"] .fields > div:nth-child(10) {width: 75px; float: right;}
[notetype="kanji"] .fields > div:nth-child(11) {width: 75px; float: right;}