style: Reformat CSS rules for improved readability and apply minor spacing and color adjustments.

styles.css

@@ -1,14 +1,22 @@
 /* Reset & Base */
 :root {
-  --bg-color: #0f172a;       /* Slate 900 */
+    --bg-color: #0f172a;
-  --text-color: #f1f5f9;     /* Slate 100 */
+    /* Slate 900 */
-  --accent-color: #38bdf8;   /* Sky 400 */
+    --text-color: #f1f5f9;
+    /* Slate 100 */
+    --accent-color: #38bdf8;
+    /* Sky 400 */
     --panel-bg: rgba(15, 23, 42, 0.8);
     --border-color: rgba(255, 255, 255, 0.1);
     --font-main: 'Outfit', sans-serif;
 }
 
-* { box-sizing: border-box; margin: 0; padding: 0; user-select: none; }
+* {
+    box-sizing: border-box;
+    margin: 0;
+    padding: 0;
+    user-select: none;
+}
 
 body {
     font-family: var(--font-main);
@@ -33,16 +41,25 @@ body {
 #scroll-container {
     height: 100%;
     overflow-y: auto;
-    padding: 0 15%; /* Margins for reading */
+    padding: 0 15%;
+    /* Margins for reading */
     position: relative;
-    scroll-behavior: auto; /* JS controlled */
+    scroll-behavior: auto;
-    scrollbar-width: none; /* Firefox */
+    /* JS controlled */
+    scrollbar-width: none;
+    /* Firefox */
 }
-#scroll-container::-webkit-scrollbar { display: none; } /* Chrome/Safari */
+
+#scroll-container::-webkit-scrollbar {
+    display: none;
+}
+
+/* Chrome/Safari */
 
 /* Content */
 #content-area {
-    padding-top: 45vh; /* Eye level approximately */
+    padding-top: 45vh;
+    /* Eye level approximately */
     /* Large bottom padding to ensure the last line can scroll up to the eye level */
     padding-bottom: 50vh;
     min-height: 100%;
@@ -58,13 +75,48 @@ body {
 }
 
 /* Typography for MD */
-#markdown-output h1 { font-size: 1.5em; color: #fff; margin-bottom: 0.5em; font-weight: 700; letter-spacing: -0.02em; }
+#markdown-output h1 {
-#markdown-output h2 { font-size: 1.3em; color: #e2e8f0; margin-top: 1em; margin-bottom: 0.5em; font-weight: 600; }
+    font-size: 1.5em;
-#markdown-output p { margin-bottom: 1em; color: #cbd5e1; }
+    color: #fff;
-#markdown-output ul, #markdown-output ol { margin-bottom: 1em; padding-left: 1.2em; }
+    margin-bottom: 0.5em;
-#markdown-output li { margin-bottom: 0.5em; }
+    font-weight: 700;
-#markdown-output strong { color: var(--accent-color); }
+    letter-spacing: -0.02em;
-#markdown-output blockquote { border-left: 4px solid var(--accent-color); padding-left: 1em; margin-left: 0; font-style: italic; color: #94a3b8; }
+}
+
+#markdown-output h2 {
+    font-size: 1.3em;
+    color: #e2e8f0;
+    margin-top: 1em;
+    margin-bottom: 0.5em;
+    font-weight: 600;
+}
+
+#markdown-output p {
+    margin-bottom: 1em;
+    color: #cbd5e1;
+}
+
+#markdown-output ul,
+#markdown-output ol {
+    margin-bottom: 1em;
+    padding-left: 1.2em;
+}
+
+#markdown-output li {
+    margin-bottom: 0.5em;
+}
+
+#markdown-output strong {
+    color: var(--accent-color);
+}
+
+#markdown-output blockquote {
+    border-left: 4px solid var(--accent-color);
+    padding-left: 1em;
+    margin-left: 0;
+    font-style: italic;
+    color: #94a3b8;
+}
 
 /* Placeholder */
 #placeholder {
@@ -77,7 +129,14 @@ body {
     transform: translate(-50%, -50%);
     width: 100%;
 }
-#placeholder h1 { font-size: 3rem; margin-bottom: 1rem; color: #fff; letter-spacing: -1px; }
+
+#placeholder h1 {
+    font-size: 3rem;
+    margin-bottom: 1rem;
+    color: #fff;
+    letter-spacing: -1px;
+}
+
 #btn-hero-open {
     background: var(--accent-color);
     color: #0f172a;
@@ -88,8 +147,10 @@ body {
     cursor: pointer;
     font-weight: 600;
     box-shadow: 0 4px 20px rgba(56, 189, 248, 0.4);
-    transition: all 0.2s;
+    margin: 1.5rem auto 0;
+    width: fit-content;
 }
+
 #btn-hero-open:hover {
     transform: scale(1.05);
     background: #fff;
@@ -145,14 +206,21 @@ button {
     align-items: center;
     justify-content: center;
 }
-button:active { transform: scale(0.95); }
+
+button:active {
+    transform: scale(0.95);
+}
 
 .icon-btn {
     padding: 8px;
     border-radius: 12px;
     color: #94a3b8;
 }
-.icon-btn:hover { background: rgba(255,255,255,0.05); color: #fff; }
+
+.icon-btn:hover {
+    background: rgba(255, 255, 255, 0.05);
+    color: #fff;
+}
 
 .action-btn {
     background: var(--accent-color);
@@ -162,16 +230,21 @@ button:active { transform: scale(0.95); }
     border-radius: 50%;
     box-shadow: 0 0 15px rgba(56, 189, 248, 0.3);
 }
-.action-btn:hover { // scale effect
+
+.action-btn:hover {
+    /* scale effect */
     background: #fff;
     transform: scale(1.05);
     box-shadow: 0 0 20px rgba(255, 255, 255, 0.4);
 }
+
 .action-btn.active {
-    background: #ef4444; /* Red for Stop */
+    background: #ef4444;
+    /* Red for Stop */
     color: white;
     box-shadow: 0 0 15px rgba(239, 68, 68, 0.4);
 }
+
 .action-btn.active:hover {
     background: #ff6b6b;
 }
@@ -185,6 +258,7 @@ button:active { transform: scale(0.95); }
     position: relative;
     top: -2px;
 }
+
 .label {
     font-size: 0.65rem;
     text-transform: uppercase;
@@ -193,6 +267,7 @@ button:active { transform: scale(0.95); }
     color: #64748b;
     margin-left: 2px;
 }
+
 input[type=range] {
     -webkit-appearance: none;
     width: 120px;
@@ -200,7 +275,11 @@ input[type=range] {
     cursor: pointer;
     margin-top: 2px;
 }
-input[type=range]:focus { outline: none; }
+
+input[type=range]:focus {
+    outline: none;
+}
+
 input[type=range]::-webkit-slider-thumb {
     -webkit-appearance: none;
     height: 14px;
@@ -211,14 +290,23 @@ input[type=range]::-webkit-slider-thumb {
     box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
     transition: transform 0.1s;
 }
-input[type=range]::-webkit-slider-thumb:hover { transform: scale(1.2); }
+
+input[type=range]::-webkit-slider-thumb:hover {
+    transform: scale(1.2);
+}
+
 input[type=range]::-webkit-slider-runnable-track {
     width: 100%;
     height: 4px;
     background: rgba(255, 255, 255, 0.1);
     border-radius: 2px;
 }
-input[type=range]:active::-webkit-slider-runnable-track { background: rgba(56, 189, 248, 0.3); }
+
+input[type=range]:active::-webkit-slider-runnable-track {
+    background: rgba(56, 189, 248, 0.3);
+}
 
 /* Mirror mode util effectively flipping X */
-.mirrored { transform: scaleX(-1); }
+.mirrored {
+    transform: scaleX(-1);
+}