style(editor): customize scrollbar appearance and improve badge layout styles

src/styles/devcm-editor.scss

@@ -7,6 +7,46 @@
   overflow-x: hidden;
   overflow-y: auto;
   overscroll-behavior: contain;
+  scrollbar-color: rgba(255, 176, 0, 0.5) rgba(5, 7, 5, 0.56);
+  scrollbar-width: thin;
+}
+
+.devcm-editor::-webkit-scrollbar {
+  width: 12px;
+  height: 12px;
+}
+
+.devcm-editor::-webkit-scrollbar-track {
+  border-left: 1px solid rgba(255, 176, 0, 0.12);
+  background: rgba(5, 7, 5, 0.54);
+}
+
+.devcm-editor::-webkit-scrollbar-thumb {
+  border: 3px solid rgba(5, 7, 5, 0.54);
+  border-radius: 999px;
+  background: linear-gradient(180deg, rgba(255, 176, 0, 0.68), rgba(104, 243, 127, 0.42));
+}
+
+.devcm-editor::-webkit-scrollbar-thumb:hover {
+  background: linear-gradient(180deg, rgba(255, 176, 0, 0.86), rgba(104, 243, 127, 0.58));
+}
+
+html[data-color-scheme="light"] .devcm-editor {
+  scrollbar-color: rgba(181, 137, 0, 0.58) rgba(238, 232, 213, 0.82);
+}
+
+html[data-color-scheme="light"] .devcm-editor::-webkit-scrollbar-track {
+  border-left-color: rgba(101, 123, 131, 0.18);
+  background: rgba(238, 232, 213, 0.82);
+}
+
+html[data-color-scheme="light"] .devcm-editor::-webkit-scrollbar-thumb {
+  border-color: rgba(238, 232, 213, 0.82);
+  background: linear-gradient(180deg, rgba(181, 137, 0, 0.68), rgba(42, 161, 152, 0.5));
+}
+
+html[data-color-scheme="light"] .devcm-editor::-webkit-scrollbar-thumb:hover {
+  background: linear-gradient(180deg, rgba(181, 137, 0, 0.86), rgba(42, 161, 152, 0.66));
 }
 
 .devcm-terminal-window,
@@ -202,14 +242,15 @@ html[data-color-scheme="light"] .devcm-article-title {
 .devcm-ascii-badge {
   position: relative;
   display: grid;
-  width: min(160px, 100%);
+  box-sizing: border-box;
+  width: min(176px, 100%);
   height: fit-content;
   min-height: 0;
   align-self: center;
   justify-self: center;
   place-items: center;
   padding: 12px 10px;
-  overflow: hidden;
+  overflow: clip;
   border: 1px dashed rgba(255, 176, 0, 0.46);
   background: radial-gradient(circle at 50% 32%, rgba(255, 176, 0, 0.14), transparent 42%),
     linear-gradient(180deg, rgba(22, 18, 10, 0.58), rgba(6, 8, 6, 0.68));
@@ -242,9 +283,11 @@ html[data-color-scheme="light"] .devcm-article-title {
   position: relative;
   z-index: 1;
   display: grid;
+  min-width: 0;
   width: 100%;
   justify-items: center;
   gap: 8px;
+  overflow: hidden;
 }
 
 .devcm-ascii-badge__label {
@@ -257,13 +300,18 @@ html[data-color-scheme="light"] .devcm-article-title {
 }
 
 .devcm-ascii-badge pre {
+  display: block;
+  max-width: 100%;
   margin: 0;
+  padding-bottom: 3px;
+  overflow: hidden;
   border: 0;
   color: var(--devcm-amber);
-  font: 900 clamp(34px, 3.1vw, 46px) / 0.78 var(--devcm-mono);
+  font: 900 clamp(30px, 3vw, 42px) / 1.34 var(--devcm-mono);
   letter-spacing: 0;
   text-shadow: 0 0 18px rgba(255, 176, 0, 0.3);
   transform: scaleX(1.04);
+  white-space: pre;
 }
 
 .devcm-ascii-badge small {