diff --git a/asciinema/theme/custom.css b/asciinema/theme/custom.css
index bf415fa..5d1a03a 100644
--- a/asciinema/theme/custom.css
+++ b/asciinema/theme/custom.css
@@ -13,22 +13,22 @@
   --pivoine-rose: rgb(206, 39, 91);
   --pivoine-rose-light: rgb(226, 79, 121);
   --pivoine-rose-dark: rgb(166, 19, 71);
-  --pivoine-rose-fade: rgba(206, 39, 91, 0.15);
-  --pivoine-rose-glow: rgba(206, 39, 91, 0.3);
+  --pivoine-rose-fade: rgba(206, 39, 91, 0.12);
+  --pivoine-rose-glow: rgba(206, 39, 91, 0.25);
 
-  /* Varied Dark Metal Backgrounds - NEW */
-  --metal-bg-darkest: hsl(210, 10%, 10%);    /* Nearly black with blue tint */
-  --metal-bg-darker: hsl(210, 9%, 15%);      /* Dark gunmetal */
-  --metal-bg-dark: hsl(210, 8%, 18%);        /* Medium dark */
-  --metal-bg-base: hsl(210, 7%, 22%);        /* Base gray */
-  --metal-bg-light: hsl(210, 8%, 26%);       /* Lighter cards */
-  --metal-bg-lighter: hsl(210, 9%, 30%);     /* Input backgrounds */
-  --metal-border: hsl(210, 10%, 35%);        /* Borders */
+  /* Polished Metal Gray Palette - Smoother, more cohesive */
+  --metal-bg-base: hsl(210, 12%, 16%);       /* Base background - soft dark */
+  --metal-bg-elevated: hsl(210, 12%, 19%);   /* Elevated surfaces (header, footer) */
+  --metal-bg-surface: hsl(210, 11%, 22%);    /* Surface elements (cards) */
+  --metal-bg-interactive: hsl(210, 10%, 25%); /* Interactive elements */
+  --metal-bg-input: hsl(210, 10%, 28%);      /* Form inputs */
+  --metal-border: hsl(210, 12%, 32%);        /* Borders - subtle */
+  --metal-border-strong: hsl(210, 15%, 40%); /* Strong borders */
 
-  /* Text Colors */
-  --metal-text-primary: hsl(210, 15%, 92%);
-  --metal-text-secondary: hsl(210, 10%, 70%);
-  --metal-text-muted: hsl(210, 8%, 55%);
+  /* Refined Text Colors */
+  --metal-text-primary: hsl(210, 12%, 94%);
+  --metal-text-secondary: hsl(210, 10%, 75%);
+  --metal-text-muted: hsl(210, 8%, 60%);
 
   /* Accent Variants */
   --pivoine-success: rgb(16, 185, 129);
@@ -38,7 +38,7 @@
 
 /* Global Styling */
 body {
-  background-color: var(--metal-bg-darkest) !important;
+  background-color: var(--metal-bg-base) !important;
   color: var(--metal-text-primary) !important;
   font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Helvetica Neue", Arial, sans-serif !important;
 }
@@ -55,8 +55,17 @@ h1, h2, .h1, .h2 {
   margin-bottom: 16px !important;
 }
 
+.heading {
+  background-color: var(--metal-bg-elevated) !important;
+  padding: 24px !important;
+  margin: -16px -16px 24px -16px !important;
+  border-radius: 8px 8px 0 0 !important;
+}
+
 .heading h2 {
   color: var(--pivoine-rose-light) !important;
+  margin: 0 !important;
+  padding-bottom: 12px !important;
 }
 
 /* Header & Navigation */
@@ -64,14 +73,14 @@ header,
 .header,
 nav,
 .navbar {
-  background-color: var(--metal-bg-darker) !important;
+  background-color: var(--metal-bg-elevated) !important;
   border-bottom: 2px solid var(--pivoine-rose) !important;
 }
 
 /* Override Bootstrap navbar-dark and bg-dark */
 .navbar-dark,
 .bg-dark {
-  background-color: var(--metal-bg-darker) !important;
+  background-color: var(--metal-bg-elevated) !important;
 }
 
 .navbar,
@@ -130,13 +139,13 @@ input[type="submit"]:active {
 /* Filter buttons (btn-light in btn-group) */
 .btn-group .btn,
 .btn-light {
-  background-color: var(--metal-bg-base) !important;
-  color: var(--metal-text-primary) !important;
+  background-color: var(--metal-bg-interactive) !important;
+  color: var(--metal-text-secondary) !important;
   border: 1px solid var(--metal-border) !important;
-  border-radius: 4px !important;
-  padding: 6px 14px !important;
+  border-radius: 6px !important;
+  padding: 8px 16px !important;
   font-weight: 500 !important;
-  font-size: 0.9em !important;
+  font-size: 0.875em !important;
   cursor: pointer;
   transition: all 0.2s ease;
   box-shadow: none !important;
@@ -144,9 +153,9 @@ input[type="submit"]:active {
 
 .btn-group .btn:hover,
 .btn-light:hover {
-  background-color: var(--metal-bg-dark) !important;
-  border-color: var(--pivoine-rose) !important;
-  color: var(--pivoine-rose-light) !important;
+  background-color: var(--metal-bg-surface) !important;
+  border-color: var(--metal-border-strong) !important;
+  color: var(--metal-text-primary) !important;
   transform: none !important;
 }
 
@@ -164,20 +173,20 @@ input[type="submit"]:active {
 .panel,
 .recording-item,
 article {
-  background-color: var(--metal-bg-light) !important;
+  background-color: var(--metal-bg-surface) !important;
   border: 1px solid var(--metal-border) !important;
   border-radius: 8px !important;
   padding: 16px !important;
   margin-bottom: 16px !important;
-  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
-  transition: all 0.3s ease;
+  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
+  transition: all 0.2s ease;
 }
 
 .card:hover,
 .recording-item:hover {
   border-color: var(--pivoine-rose) !important;
-  box-shadow: 0 4px 12px var(--pivoine-rose-glow);
-  transform: translateY(-2px);
+  box-shadow: 0 2px 8px var(--pivoine-rose-glow);
+  transform: translateY(-1px);
 }
 
 /* Don't style Bootstrap .container - it's a layout wrapper */
@@ -196,12 +205,12 @@ input[type="password"],
 input[type="search"],
 textarea,
 select {
-  background-color: var(--metal-bg-lighter) !important;
+  background-color: var(--metal-bg-input) !important;
   color: var(--metal-text-primary) !important;
-  border: 2px solid var(--metal-border) !important;
+  border: 1px solid var(--metal-border) !important;
   border-radius: 6px !important;
   padding: 10px 14px !important;
-  transition: all 0.3s ease;
+  transition: all 0.2s ease;
 }
 
 input:focus,
@@ -210,20 +219,21 @@ select:focus {
   outline: none !important;
   border-color: var(--pivoine-rose) !important;
   box-shadow: 0 0 0 3px var(--pivoine-rose-fade);
+  background-color: var(--metal-bg-surface) !important;
 }
 
 /* Terminal Player */
 .asciinema-player,
 .player-wrapper,
 .terminal {
-  background-color: var(--metal-bg-darkest) !important;
+  background-color: var(--metal-bg-base) !important;
   border: 2px solid var(--pivoine-rose) !important;
   border-radius: 8px !important;
-  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4);
+  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3);
 }
 
 .asciinema-player .control-bar {
-  background-color: var(--metal-bg-dark) !important;
+  background-color: var(--metal-bg-elevated) !important;
   border-top: 1px solid var(--metal-border) !important;
 }
 
@@ -277,13 +287,13 @@ select:focus {
 
 /* Tables */
 table {
-  background-color: var(--metal-bg-light) !important;
+  background-color: var(--metal-bg-surface) !important;
   border-collapse: collapse;
   width: 100%;
 }
 
 thead {
-  background-color: var(--metal-bg-darker) !important;
+  background-color: var(--metal-bg-elevated) !important;
   border-bottom: 2px solid var(--pivoine-rose) !important;
 }
 
@@ -307,19 +317,20 @@ tr:hover {
 /* Pagination */
 .pagination a,
 .pagination span {
-  background-color: var(--metal-bg-base) !important;
-  color: var(--metal-text-primary) !important;
+  background-color: var(--metal-bg-interactive) !important;
+  color: var(--metal-text-secondary) !important;
   border: 1px solid var(--metal-border) !important;
-  border-radius: 4px !important;
-  padding: 6px 12px !important;
+  border-radius: 6px !important;
+  padding: 8px 14px !important;
   margin: 0 4px;
   display: inline-block;
+  transition: all 0.2s ease;
 }
 
 .pagination a:hover {
-  background-color: var(--pivoine-rose) !important;
-  border-color: var(--pivoine-rose) !important;
-  color: white !important;
+  background-color: var(--metal-bg-surface) !important;
+  border-color: var(--metal-border-strong) !important;
+  color: var(--metal-text-primary) !important;
 }
 
 .pagination .current {
@@ -330,7 +341,7 @@ tr:hover {
 
 /* Footer */
 footer {
-  background-color: var(--metal-bg-dark) !important;
+  background-color: var(--metal-bg-elevated) !important;
   border-top: 2px solid var(--pivoine-rose) !important;
   color: var(--metal-text-secondary) !important;
   padding: 24px 0 !important;
@@ -340,10 +351,10 @@ footer {
 /* Code Blocks */
 pre,
 code {
-  background-color: var(--metal-bg-darkest) !important;
+  background-color: var(--metal-bg-base) !important;
   color: var(--metal-text-primary) !important;
   border: 1px solid var(--metal-border) !important;
-  border-radius: 4px !important;
+  border-radius: 6px !important;
   padding: 12px !important;
   font-family: "JetBrains Mono", "Fira Code", "Consolas", monospace !important;
   font-size: 0.9em;
@@ -404,18 +415,18 @@ code {
 
 /* Scrollbar Styling */
 ::-webkit-scrollbar {
-  width: 12px;
-  height: 12px;
+  width: 10px;
+  height: 10px;
 }
 
 ::-webkit-scrollbar-track {
-  background-color: var(--metal-bg-dark);
+  background-color: var(--metal-bg-base);
 }
 
 ::-webkit-scrollbar-thumb {
   background-color: var(--metal-border);
-  border-radius: 6px;
-  border: 2px solid var(--metal-bg-dark);
+  border-radius: 5px;
+  border: 2px solid var(--metal-bg-base);
 }
 
 ::-webkit-scrollbar-thumb:hover {