diff --git a/static/base.css b/static/base.css
new file mode 100644
index 0000000..701ac54
--- /dev/null
+++ b/static/base.css
@@ -0,0 +1,41 @@
+@import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@300;400;500;700&display=swap');
+
+/* === CSS VARIABLES === */
+:root {
+    /* Colors */
+    --color-bg-body: #161b22;
+    --color-bg-dark: #121212;
+    --color-bg-sidebar: #111;
+    --color-bg-component: #1e1e1e;
+    --color-bg-hover: #2a2a2a;
+    --color-bg-accent: #005f87;
+    --color-bg-tab-active: #1a3d2a;
+    --color-border: #444;
+    --color-border-accent: #00ff88;
+    --color-border-panel: #30363d;
+    --color-text-primary: #ccc;
+    --color-text-muted: #888;
+    --color-text-accent: #00ff88;
+    --color-text-white: #fff;
+    --color-text-dark: #333;
+    --color-button: #238636;
+    --color-button-disabled: #555;
+    --color-connection: #333;
+    --color-connection-selected: #007bff;
+    --color-tooltip-bg: #333;
+    --color-tooltip-text: #fff;
+
+    /* Sizes */
+    --radius-small: 4px;
+    --radius-medium: 6px;
+    --radius-large: 8px;
+    --font-family-mono: 'JetBrains Mono', monospace;
+    --font-family-code: 'Fira Code', monospace;
+    --component-padding: 8px;
+    --component-gap: 12px;
+}
+
+/* === RESET & BASE STYLES === */
+* {
+    box-sizing: border-box;
+} 
\ No newline at end of file
diff --git a/static/difficulty-select.css b/static/difficulty-select.css
index cf0d48e..f7f252e 100644
--- a/static/difficulty-select.css
+++ b/static/difficulty-select.css
@@ -1,50 +1,13 @@
-@import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@300;400;500;700&display=swap');
+@import url('./base.css');
 
-/* === CSS VARIABLES === */
+/* === DIFFICULTY-SPECIFIC VARIABLES === */
 :root {
-    /* Colors */
-    --color-bg-body: #161b22;
-    --color-bg-dark: #121212;
-    --color-bg-sidebar: #111;
-    --color-bg-component: #1e1e1e;
-    --color-bg-hover: #2a2a2a;
-    --color-bg-accent: #005f87;
-    --color-bg-tab-active: #1a3d2a;
-    --color-border: #444;
-    --color-border-accent: #00ff88;
-    --color-border-panel: #30363d;
-    --color-text-primary: #ccc;
-    --color-text-muted: #888;
-    --color-text-accent: #00ff88;
-    --color-text-white: #fff;
-    --color-text-dark: #333;
-    --color-button: #238636;
-    --color-button-disabled: #555;
-    --color-connection: #333;
-    --color-connection-selected: #007bff;
-    --color-tooltip-bg: #333;
-    --color-tooltip-text: #fff;
-
-    /* Sizes */
-    --radius-small: 4px;
-    --radius-medium: 6px;
-    --radius-large: 8px;
-    --font-family-mono: 'JetBrains Mono', monospace;
-    --font-family-code: 'Fira Code', monospace;
-    --component-padding: 8px;
-    --component-gap: 12px;
-
     /* Difficulty-specific colors using existing palette */
     --color-easy: var(--color-text-accent);
     --color-medium: #d29922;
     --color-hard: #f85149;
 }
 
-/* === RESET === */
-* {
-    box-sizing: border-box;
-}
-
 body {
     margin: 0;
     font-family: var(--font-family-mono);
diff --git a/static/game-mode.css b/static/game-mode.css
index a59896a..665f838 100644
--- a/static/game-mode.css
+++ b/static/game-mode.css
@@ -1,45 +1,5 @@
 /* Reusing the existing CSS from the game */
-@import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@300;400;500;700&display=swap');
-
-/* === CSS VARIABLES === */
-:root {
-    /* Colors */
-    --color-bg-body: #161b22;
-    --color-bg-dark: #121212;
-    --color-bg-sidebar: #111;
-    --color-bg-component: #1e1e1e;
-    --color-bg-hover: #2a2a2a;
-    --color-bg-accent: #005f87;
-    --color-bg-tab-active: #1a3d2a;
-    --color-border: #444;
-    --color-border-accent: #00ff88;
-    --color-border-panel: #30363d;
-    --color-text-primary: #ccc;
-    --color-text-muted: #888;
-    --color-text-accent: #00ff88;
-    --color-text-white: #fff;
-    --color-text-dark: #333;
-    --color-button: #238636;
-    --color-button-disabled: #555;
-    --color-connection: #333;
-    --color-connection-selected: #007bff;
-    --color-tooltip-bg: #333;
-    --color-tooltip-text: #fff;
-
-    /* Sizes */
-    --radius-small: 4px;
-    --radius-medium: 6px;
-    --radius-large: 8px;
-    --font-family-mono: 'JetBrains Mono', monospace;
-    --font-family-code: 'Fira Code', monospace;
-    --component-padding: 8px;
-    --component-gap: 12px;
-}
-
-/* === RESET & BASE STYLES === */
-* {
-    box-sizing: border-box;
-}
+@import url('./base.css');
 
 body {
     margin: 0;
diff --git a/static/game-mode.html b/static/game-mode.html
index 50a1b14..19191f3 100644
--- a/static/game-mode.html
+++ b/static/game-mode.html
@@ -4,7 +4,7 @@
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>System Design Game - Choose Your Path</title>
-    <link rel="stylesheet" href="game-mode.css">
+    <link rel="stylesheet" href="/static/game-mode.css">
 </head>
 <body>
     <div id="page-container">
diff --git a/static/game.css b/static/game.css
index d59014f..705d576 100644
--- a/static/game.css
+++ b/static/game.css
@@ -1,44 +1,4 @@
-@import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@300;400;500;700&display=swap');
-
-/* === CSS VARIABLES === */
-:root {
-    /* Colors */
-    --color-bg-body: #161b22;
-    --color-bg-dark: #121212;
-    --color-bg-sidebar: #111;
-    --color-bg-component: #1e1e1e;
-    --color-bg-hover: #2a2a2a;
-    --color-bg-accent: #005f87;
-    --color-bg-tab-active: #1a3d2a;
-    --color-border: #444;
-    --color-border-accent: #00ff88;
-    --color-border-panel: #30363d;
-    --color-text-primary: #ccc;
-    --color-text-muted: #888;
-    --color-text-accent: #00ff88;
-    --color-text-white: #fff;
-    --color-text-dark: #333;
-    --color-button: #238636;
-    --color-button-disabled: #555;
-    --color-connection: #333;
-    --color-connection-selected: #007bff;
-    --color-tooltip-bg: #333;
-    --color-tooltip-text: #fff;
-
-    /* Sizes */
-    --radius-small: 4px;
-    --radius-medium: 6px;
-    --radius-large: 8px;
-    --font-family-mono: 'JetBrains Mono', monospace;
-    --font-family-code: 'Fira Code', monospace;
-    --component-padding: 8px;
-    --component-gap: 12px;
-}
-
-/* === RESET & BASE STYLES === */
-* {
-    box-sizing: border-box;
-}
+@import url('./base.css');
 
 body {
     margin: 0;
diff --git a/static/index.html b/static/index.html
index bf2747d..b877262 100644
--- a/static/index.html
+++ b/static/index.html
@@ -4,7 +4,7 @@
         <meta charset="UTF-8">
         <meta name="viewport" content="width=device-width, initial-scale=1.0">
         <title>System Design Game - Interactive Platform for Engineers</title>
-        <link rel="stylesheet" href="index.css">
+        <link rel="stylesheet" href="/static/index.css">
     </head>
     <body>
         <header>
diff --git a/static/success.css b/static/success.css
new file mode 100644
index 0000000..7e8052e
--- /dev/null
+++ b/static/success.css
@@ -0,0 +1,626 @@
+@import url('./base.css');
+
+body {
+    margin: 0;
+    font-family: var(--font-family-mono);
+    background-color: var(--color-bg-body);
+    color: var(--color-text-primary);
+    display: flex;
+    flex-direction: row;
+    height: 100vh;
+}
+
+/* === LAYOUT === */
+#page-container {
+    display: flex;
+    flex-direction: column;
+    width: 100%;
+}
+
+#sd-header {
+    width: 100%;
+    background: none;
+    padding: 12px 24px;
+    font-weight: bold;
+    color: var(--color-text-accent);
+    border-bottom: 1px solid var(--color-text-dark);
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+}
+
+.header-text {
+    font-size: 24px;
+    margin: 0;
+}
+
+#main-content {
+    display: flex;
+    flex-direction: row;
+    height: 100%;
+    background: radial-gradient(circle at 30% 50%, rgba(0, 255, 136, 0.1), transparent 50%),
+        radial-gradient(circle at 70% 80%, rgba(255, 107, 53, 0.1), transparent 50%);
+}
+
+/* === SIDEBAR === */
+#sidebar {
+    width: 100%;
+    background-color: var(--color-bg-sidebar);
+    display: flex;
+    flex-wrap: wrap;
+    flex-direction: row;
+    gap: var(--component-gap);
+}
+
+.sidebar-title {
+    color: #8b949e;
+    font-size: 14px;
+    text-transform: uppercase;
+    letter-spacing: 1px;
+    margin-bottom: 15px;
+    padding-bottom: 8px;
+    padding-left: 8px;
+    border-bottom: 1px solid #303638;
+}
+
+/* === COMPONENT ICONS === */
+.component-icon,
+#arrow-tool {
+    position: relative;
+    padding: var(--component-padding) 12px;
+    background-color: var(--color-bg-component);
+    border: 1px solid var(--color-border);
+    border-radius: var(--radius-medium);
+    text-align: center;
+    cursor: grab;
+    user-select: none;
+    font-size: 16px;
+    color: var(--color-text-primary);
+    transition: background-color 0.1s ease;
+}
+
+.component-icon:hover,
+#arrow-tool:hover {
+    background-color: var(--color-bg-hover);
+    border-color: var(--color-border-accent);
+}
+
+.component-icon:active,
+#arrow-tool:active {
+    cursor: grabbing;
+}
+
+#arrow-tool.active {
+    background-color: var(--color-bg-accent);
+    color: var(--color-text-white);
+    border-color: var(--color-button);
+}
+
+/* === TOOLTIP === */
+.tooltip {
+    visibility: hidden;
+    opacity: 0;
+    position: absolute;
+    top: 100%;
+    left: 0;
+    z-index: 10;
+    background: var(--color-tooltip-bg);
+    color: var(--color-tooltip-text);
+    padding: 6px 8px;
+    border-radius: var(--radius-small);
+    white-space: nowrap;
+    font-size: 14px;
+    line-height: 1.4;
+    margin-top: 4px;
+    transition: opacity 0.2s;
+}
+
+.component-icon:hover .tooltip {
+    visibility: visible;
+    opacity: 1;
+    z-index: 1000;
+}
+
+.component-icon.dragging .tooltip {
+    display: none;
+}
+
+/* === CANVAS === */
+#canvas-wrapper {
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+    border-radius: var(--radius-large);
+    border: 2px solid var(--color-border-panel);
+    overflow: hidden;
+    background: var(--color-bg-dark);
+    margin: 12px 12px 12px 0;
+    padding: 16px;
+}
+
+#canvas-container {
+    flex: 1;
+    position: relative;
+    background: var(--color-bg-dark);
+    height: 100%;
+    margin-top: 16px;
+}
+
+#canvas {
+    width: 100%;
+    height: 90%;
+    background: var(--color-bg-dark);
+    border: 2px dashed var(--color-border-panel);
+    border-radius: var(--radius-large);
+}
+
+.dropped {
+    cursor: move;
+}
+
+.dropped.selected rect {
+    stroke: #00bcd4;
+    stroke-width: 2;
+}
+
+/* === TOOLBAR === */
+#canvas-toolbar {
+    position: absolute;
+    top: 12px;
+    left: 12px;
+    z-index: 20;
+    display: flex;
+    gap: 8px;
+    background: var(--color-bg-component);
+    border: 1px solid var(--color-border);
+    border-radius: var(--radius-small);
+    padding: 6px;
+    box-shadow: 0 0 8px rgba(0, 0, 0, 0.4);
+}
+
+.toolbar-btn {
+    background: none;
+    border: 1px solid var(--color-border);
+    color: var(--color-text-primary);
+    padding: 6px 10px;
+    border-radius: var(--radius-small);
+    font-size: 14px;
+    cursor: pointer;
+    font-family: var(--font-family-mono);
+}
+
+.toolbar-btn:hover {
+    background-color: var(--color-bg-hover);
+    border-color: var(--color-border-accent);
+}
+
+.toolbar-btn.active {
+    background-color: var(--color-bg-accent);
+    color: var(--color-text-white);
+    border-color: var(--color-button);
+}
+
+/* === PANELS === */
+#info-panel {
+    position: absolute;
+    top: 12px;
+    right: 12px;
+    background: var(--color-bg-dark);
+    color: var(--color-text-primary);
+    padding: 1rem;
+    border-radius: var(--radius-large);
+    font-family: monospace;
+    font-size: 14px;
+    min-width: 220px;
+    z-index: 10;
+    border: 1px solid var(--color-text-dark);
+    box-shadow: 0 0 8px rgba(0, 0, 0, 0.3);
+}
+
+#node-props-panel {
+    position: absolute;
+    width: 220px;
+    background-color: var(--color-bg-sidebar);
+    border: 1px solid var(--color-border);
+    border-radius: var(--radius-small);
+    padding: 12px;
+    color: var(--color-text-white);
+    box-shadow: 0 0 10px rgba(0, 0, 0, 0.6);
+    display: none;
+    z-index: 10;
+}
+
+#node-props-panel h3 {
+    margin-top: 0;
+    font-size: 15px;
+    color: var(--color-text-primary);
+}
+
+#node-props-panel .form-group {
+    margin-bottom: 10px;
+}
+
+#node-props-panel label {
+    display: block;
+    font-weight: bold;
+    margin-bottom: 4px;
+}
+
+#node-props-panel select {
+    width: 100%;
+    padding: 4px;
+    font-size: 14px;
+}
+
+.prop-group {
+    display: none;
+    margin-bottom: 12px;
+}
+
+.prop-group label,
+.prop-group input {
+    display: block;
+    width: 100%;
+    margin-top: 6px;
+    font-size: 13px;
+}
+
+.panel-title {
+    font-weight: bold;
+    color: var(--color-text-white);
+    font-size: 15px;
+    margin-bottom: 0.5rem;
+}
+
+.panel-metric {
+    margin-bottom: 0.4rem;
+}
+
+.panel-metric .label {
+    display: inline-block;
+    width: 140px;
+    color: var(--color-text-muted);
+}
+
+/* === INPUTS & BUTTONS === */
+input[type="text"],
+input[type="number"] {
+    padding: 6px;
+    background-color: #222;
+    border: 1px solid var(--color-border);
+    color: var(--color-text-white);
+    border-radius: var(--radius-small);
+    font-family: var(--font-family-code);
+}
+
+#node-props-save,
+#run-button {
+    margin-top: 8px;
+    padding: 10px;
+    background-color: var(--color-button);
+    color: var(--color-text-white);
+    border: none;
+    border-radius: var(--radius-small);
+    cursor: pointer;
+    font-size: 14px;
+}
+
+#run-button:disabled,
+#node-props-panel button:disabled {
+    background-color: var(--color-button-disabled);
+    cursor: not-allowed;
+}
+
+#github-login-btn {
+    display: inline-flex;
+    align-items: center;
+    gap: 8px;
+    padding: 8px 14px;
+    background-color: #fff;
+    color: #000000;
+    text-decoration: none;
+    border-radius: var(--radius-medium);
+    font-weight: 500;
+    font-family: var(--font-family-mono);
+    font-size: 12px;
+    border: 1px solid #2ea043;
+    transition: background-color 0.2s ease;
+    float: right;
+}
+
+#github-login-btn:hover {
+    background-color: #ccc;
+}
+
+#github-login-btn img {
+    width: 18px;
+    height: 18px;
+}
+
+/* === TABS === */
+.tabs {
+    display: flex;
+    flex-direction: column;
+    height: 100%;
+    overflow: hidden;
+}
+
+.tab-labels {
+    display: flex;
+    cursor: pointer;
+}
+
+.tab-labels label {
+    padding: 10px 20px;
+    background: var(--color-bg-body);
+    margin-right: 4px;
+    margin-bottom: 20px;
+    border-radius: var(--radius-small);
+}
+
+.tab-content {
+    border-top: 1px solid var(--color-border-panel);
+    padding: 20px 0 0;
+    display: none;
+    height: 100%;
+}
+
+input[name="tab"] {
+    display: none;
+}
+
+#tab1:checked ~ .tabs .tab-labels label[for="tab1"],
+#tab2:checked ~ .tabs .tab-labels label[for="tab2"],
+#tab3:checked ~ .tabs .tab-labels label[for="tab3"] {
+    background: var(--color-bg-tab-active);
+    font-weight: bold;
+    color: var(--color-text-accent);
+}
+
+#tab1:checked ~ .tabs #content1,
+#tab2:checked ~ .tabs #content2,
+#tab3:checked ~ .tabs #content3 {
+    display: flex;
+    flex-direction: column;
+    height: 100%;
+    overflow: hidden;
+}
+
+/* === CHALLENGE PANEL === */
+#challenge-container {
+    width: 15%;
+    background: var(--color-bg-dark);
+    margin: 12px 12px;
+    border: 2px solid var(--color-border-panel);
+    border-radius: var(--radius-large);
+    padding: 0 12px;
+}
+
+.challenge-list {
+    list-style: none;
+    margin: 0;
+    padding: 0;
+}
+
+.challenge-item {
+    padding: 10px;
+    margin: 5px 0;
+    background: #21262d;
+    border-radius: 6px;
+    cursor: pointer;
+    transition: all 0.2s ease;
+    border-left: 3px solid transparent;
+    list-style: none;
+}
+
+.challenge-item:hover {
+    background: #30363d;
+}
+
+.challenge-item.active {
+    background: #1a3d2a;
+    border-left-color: #00ff88;
+}
+
+.challenge-name {
+    font-weight: 500;
+    margin-bottom: 5px;
+}
+
+.challenge-difficulty {
+    font-size: 0.8rem;
+    color: #0b949e;
+}
+
+.challenge-difficulty.easy {
+    color: #3fb950;
+}
+
+.challenge-difficulty.medium {
+    color: #d29922;
+}
+
+.challenge-difficulty.hard {
+    color: #f85149;
+}
+
+/* === REQUIREMENTS === */
+.requirements-section {
+    background: #161b22;
+    border: 1px solid #30363d;
+    border-radius: 8px;
+    padding: 20px;
+    margin-bottom: 20px;
+}
+
+.requirements-list {
+    margin: 0;
+    padding: 0;
+    list-style: none;
+}
+
+.requirement-item {
+    position: relative;
+    padding: 8px 0 8px 25px;
+    margin: 0;
+    border-bottom: 1px solid #30363d;
+}
+
+.requirement-item:before {
+    content: "✓";
+    color: #00ff88;
+    position: absolute;
+    left: 0;
+}
+
+/* === MODAL === */
+.modal {
+    position: absolute;
+    top: 30%;
+    left: 50%;
+    transform: translate(-50%, -30%);
+    background: #121212;
+    padding: 20px;
+    border-radius: 8px;
+    border: 1px solid #444;
+    z-index: 999;
+    color: #ccc;
+}
+
+.modal-content label {
+    display: block;
+    margin: 10px 0;
+}
+
+.modal-actions {
+    margin-top: 10px;
+    text-align: right;
+}
+
+.modal input,
+.modal select {
+    width: 100%;
+    padding: 6px;
+    margin-top: 4px;
+    background: #222;
+    border: 1px solid #444;
+    color: #fff;
+    border-radius: 4px;
+}
+
+/* === MISC === */
+#score-panel {
+    margin-top: 16px;
+}
+
+.userbox {
+    display: flex;
+    align-items: center;
+    gap: 12px;
+}
+
+.avatar {
+    width: 32px;
+    height: 32px;
+    border-radius: 12px;
+}
+
+/* === SUCCESS PAGE SPECIFIC STYLES === */
+.success-main-content {
+    justify-content: center;
+    align-items: center;
+    flex: 1;
+    padding: 40px;
+}
+
+.success-container {
+    max-width: 600px;
+    width: 100%;
+    background: var(--color-bg-component);
+    border: 1px solid var(--color-border);
+    border-radius: var(--radius-large);
+    padding: 32px;
+}
+
+.success-title {
+    color: var(--color-text-accent);
+    font-size: 32px;
+    text-align: center;
+    margin-top: 0;
+}
+
+.success-subtitle {
+    text-align: center;
+    font-size: 16px;
+    color: var(--color-text-muted);
+    margin-bottom: 32px;
+}
+
+.failure-metrics {
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+    gap: 16px;
+    margin-bottom: 24px;
+}
+
+.metric-item {
+    background: var(--color-bg-dark);
+    border: 1px solid var(--color-border);
+    padding: 16px;
+    border-radius: var(--radius-medium);
+    text-align: center;
+}
+
+.metric-label {
+    color: var(--color-text-muted);
+    margin-bottom: 6px;
+}
+
+.metric-value {
+    font-size: 20px;
+    font-weight: bold;
+}
+
+.metric-value.success {
+    color: var(--color-text-accent);
+}
+
+.error-log {
+    background: var(--color-bg-dark);
+    border: 1px solid var(--color-border);
+    border-radius: var(--radius-small);
+    padding: 16px;
+    font-family: monospace;
+    font-size: 13px;
+    color: var(--color-text-muted);
+    max-height: 160px;
+    overflow-y: auto;
+}
+
+.action-buttons {
+    display: flex;
+    justify-content: center;
+    gap: 16px;
+    margin-top: 32px;
+}
+
+.action-button {
+    padding: 12px 24px;
+    border: none;
+    border-radius: var(--radius-medium);
+    font-size: 14px;
+    cursor: pointer;
+    text-decoration: none;
+    display: inline-block;
+}
+
+.retry-button {
+    background: var(--color-button);
+    color: var(--color-text-white);
+}
+
+.menu-button {
+    background: transparent;
+    border: 1px solid var(--color-border);
+    color: var(--color-text-accent);
+} 
\ No newline at end of file
diff --git a/static/success.html b/static/success.html
index 8c4399d..1daa407 100644
--- a/static/success.html
+++ b/static/success.html
@@ -5,576 +5,7 @@
   <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
   <title>System Success - System Design Game</title>
   <link href="https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@300;400;500;700&display=swap" rel="stylesheet"/>
-  <style>
-@import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@300;400;500;700&display=swap');
-
-/* === CSS VARIABLES === */
-:root {
-    /* Colors */
-    --color-bg-body: #161b22;
-    --color-bg-dark: #121212;
-    --color-bg-sidebar: #111;
-    --color-bg-component: #1e1e1e;
-    --color-bg-hover: #2a2a2a;
-    --color-bg-accent: #005f87;
-    --color-bg-tab-active: #1a3d2a;
-    --color-border: #444;
-    --color-border-accent: #00ff88;
-    --color-border-panel: #30363d;
-    --color-text-primary: #ccc;
-    --color-text-muted: #888;
-    --color-text-accent: #00ff88;
-    --color-text-white: #fff;
-    --color-text-dark: #333;
-    --color-button: #238636;
-    --color-button-disabled: #555;
-    --color-connection: #333;
-    --color-connection-selected: #007bff;
-    --color-tooltip-bg: #333;
-    --color-tooltip-text: #fff;
-
-    /* Sizes */
-    --radius-small: 4px;
-    --radius-medium: 6px;
-    --radius-large: 8px;
-    --font-family-mono: 'JetBrains Mono', monospace;
-    --font-family-code: 'Fira Code', monospace;
-    --component-padding: 8px;
-    --component-gap: 12px;
-}
-
-/* === RESET & BASE STYLES === */
-* {
-    box-sizing: border-box;
-}
-
-body {
-    margin: 0;
-    font-family: var(--font-family-mono);
-    background-color: var(--color-bg-body);
-    color: var(--color-text-primary);
-    display: flex;
-    flex-direction: row;
-    height: 100vh;
-}
-
-/* === LAYOUT === */
-#page-container {
-    display: flex;
-    flex-direction: column;
-    width: 100%;
-}
-
-#sd-header {
-    width: 100%;
-    background: none;
-    padding: 12px 24px;
-    font-weight: bold;
-    color: var(--color-text-accent);
-    border-bottom: 1px solid var(--color-text-dark);
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-}
-
-.header-text {
-    font-size: 24px;
-    margin: 0;
-}
-
-#main-content {
-    display: flex;
-    flex-direction: row;
-    height: 100%;
-    background: radial-gradient(circle at 30% 50%, rgba(0, 255, 136, 0.1), transparent 50%),
-        radial-gradient(circle at 70% 80%, rgba(255, 107, 53, 0.1), transparent 50%);
-}
-
-/* === SIDEBAR === */
-#sidebar {
-    width: 100%;
-    background-color: var(--color-bg-sidebar);
-    display: flex;
-    flex-wrap: wrap;
-    flex-direction: row;
-    gap: var(--component-gap);
-}
-
-.sidebar-title {
-    color: #8b949e;
-    font-size: 14px;
-    text-transform: uppercase;
-    letter-spacing: 1px;
-    margin-bottom: 15px;
-    padding-bottom: 8px;
-    padding-left: 8px;
-    border-bottom: 1px solid #303638;
-}
-
-/* === COMPONENT ICONS === */
-.component-icon,
-#arrow-tool {
-    position: relative;
-    padding: var(--component-padding) 12px;
-    background-color: var(--color-bg-component);
-    border: 1px solid var(--color-border);
-    border-radius: var(--radius-medium);
-    text-align: center;
-    cursor: grab;
-    user-select: none;
-    font-size: 16px;
-    color: var(--color-text-primary);
-    transition: background-color 0.1s ease;
-}
-
-.component-icon:hover,
-#arrow-tool:hover {
-    background-color: var(--color-bg-hover);
-    border-color: var(--color-border-accent);
-}
-
-.component-icon:active,
-#arrow-tool:active {
-    cursor: grabbing;
-}
-
-#arrow-tool.active {
-    background-color: var(--color-bg-accent);
-    color: var(--color-text-white);
-    border-color: var(--color-button);
-}
-
-/* === TOOLTIP === */
-.tooltip {
-    visibility: hidden;
-    opacity: 0;
-    position: absolute;
-    top: 100%;
-    left: 0;
-    z-index: 10;
-    background: var(--color-tooltip-bg);
-    color: var(--color-tooltip-text);
-    padding: 6px 8px;
-    border-radius: var(--radius-small);
-    white-space: nowrap;
-    font-size: 14px;
-    line-height: 1.4;
-    margin-top: 4px;
-    transition: opacity 0.2s;
-}
-
-.component-icon:hover .tooltip {
-    visibility: visible;
-    opacity: 1;
-    z-index: 1000;
-}
-
-.component-icon.dragging .tooltip {
-    display: none;
-}
-
-/* === CANVAS === */
-#canvas-wrapper {
-    flex: 1;
-    display: flex;
-    flex-direction: column;
-    border-radius: var(--radius-large);
-    border: 2px solid var(--color-border-panel);
-    overflow: hidden;
-    background: var(--color-bg-dark);
-    margin: 12px 12px 12px 0;
-    padding: 16px;
-}
-
-#canvas-container {
-    flex: 1;
-    position: relative;
-    background: var(--color-bg-dark);
-    height: 100%;
-    margin-top: 16px;
-}
-
-#canvas {
-    width: 100%;
-    height: 90%;
-    background: var(--color-bg-dark);
-    border: 2px dashed var(--color-border-panel);
-    border-radius: var(--radius-large);
-}
-
-.dropped {
-    cursor: move;
-}
-
-.dropped.selected rect {
-    stroke: #00bcd4;
-    stroke-width: 2;
-}
-
-/* === TOOLBAR === */
-#canvas-toolbar {
-    position: absolute;
-    top: 12px;
-    left: 12px;
-    z-index: 20;
-    display: flex;
-    gap: 8px;
-    background: var(--color-bg-component);
-    border: 1px solid var(--color-border);
-    border-radius: var(--radius-small);
-    padding: 6px;
-    box-shadow: 0 0 8px rgba(0, 0, 0, 0.4);
-}
-
-.toolbar-btn {
-    background: none;
-    border: 1px solid var(--color-border);
-    color: var(--color-text-primary);
-    padding: 6px 10px;
-    border-radius: var(--radius-small);
-    font-size: 14px;
-    cursor: pointer;
-    font-family: var(--font-family-mono);
-}
-
-.toolbar-btn:hover {
-    background-color: var(--color-bg-hover);
-    border-color: var(--color-border-accent);
-}
-
-.toolbar-btn.active {
-    background-color: var(--color-bg-accent);
-    color: var(--color-text-white);
-    border-color: var(--color-button);
-}
-
-/* === PANELS === */
-#info-panel {
-    position: absolute;
-    top: 12px;
-    right: 12px;
-    background: var(--color-bg-dark);
-    color: var(--color-text-primary);
-    padding: 1rem;
-    border-radius: var(--radius-large);
-    font-family: monospace;
-    font-size: 14px;
-    min-width: 220px;
-    z-index: 10;
-    border: 1px solid var(--color-text-dark);
-    box-shadow: 0 0 8px rgba(0, 0, 0, 0.3);
-}
-
-#node-props-panel {
-    position: absolute;
-    width: 220px;
-    background-color: var(--color-bg-sidebar);
-    border: 1px solid var(--color-border);
-    border-radius: var(--radius-small);
-    padding: 12px;
-    color: var(--color-text-white);
-    box-shadow: 0 0 10px rgba(0, 0, 0, 0.6);
-    display: none;
-    z-index: 10;
-}
-
-#node-props-panel h3 {
-    margin-top: 0;
-    font-size: 15px;
-    color: var(--color-text-primary);
-}
-
-#node-props-panel .form-group {
-    margin-bottom: 10px;
-}
-
-#node-props-panel label {
-    display: block;
-    font-weight: bold;
-    margin-bottom: 4px;
-}
-
-#node-props-panel select {
-    width: 100%;
-    padding: 4px;
-    font-size: 14px;
-}
-
-.prop-group {
-    display: none;
-    margin-bottom: 12px;
-}
-
-.prop-group label,
-.prop-group input {
-    display: block;
-    width: 100%;
-    margin-top: 6px;
-    font-size: 13px;
-}
-
-.panel-title {
-    font-weight: bold;
-    color: var(--color-text-white);
-    font-size: 15px;
-    margin-bottom: 0.5rem;
-}
-
-.panel-metric {
-    margin-bottom: 0.4rem;
-}
-
-.panel-metric .label {
-    display: inline-block;
-    width: 140px;
-    color: var(--color-text-muted);
-}
-
-/* === INPUTS & BUTTONS === */
-input[type="text"],
-input[type="number"] {
-    padding: 6px;
-    background-color: #222;
-    border: 1px solid var(--color-border);
-    color: var(--color-text-white);
-    border-radius: var(--radius-small);
-    font-family: var(--font-family-code);
-}
-
-#node-props-save,
-#run-button {
-    margin-top: 8px;
-    padding: 10px;
-    background-color: var(--color-button);
-    color: var(--color-text-white);
-    border: none;
-    border-radius: var(--radius-small);
-    cursor: pointer;
-    font-size: 14px;
-}
-
-#run-button:disabled,
-#node-props-panel button:disabled {
-    background-color: var(--color-button-disabled);
-    cursor: not-allowed;
-}
-
-#github-login-btn {
-    display: inline-flex;
-    align-items: center;
-    gap: 8px;
-    padding: 8px 14px;
-    background-color: #fff;
-    color: #000000;
-    text-decoration: none;
-    border-radius: var(--radius-medium);
-    font-weight: 500;
-    font-family: var(--font-family-mono);
-    font-size: 12px;
-    border: 1px solid #2ea043;
-    transition: background-color 0.2s ease;
-    float: right;
-}
-
-#github-login-btn:hover {
-    background-color: #ccc;
-}
-
-#github-login-btn img {
-    width: 18px;
-    height: 18px;
-}
-
-/* === TABS === */
-.tabs {
-    display: flex;
-    flex-direction: column;
-    height: 100%;
-    overflow: hidden;
-}
-
-.tab-labels {
-    display: flex;
-    cursor: pointer;
-}
-
-.tab-labels label {
-    padding: 10px 20px;
-    background: var(--color-bg-body);
-    margin-right: 4px;
-    margin-bottom: 20px;
-    border-radius: var(--radius-small);
-}
-
-.tab-content {
-    border-top: 1px solid var(--color-border-panel);
-    padding: 20px 0 0;
-    display: none;
-    height: 100%;
-}
-
-input[name="tab"] {
-    display: none;
-}
-
-#tab1:checked ~ .tabs .tab-labels label[for="tab1"],
-#tab2:checked ~ .tabs .tab-labels label[for="tab2"],
-#tab3:checked ~ .tabs .tab-labels label[for="tab3"] {
-    background: var(--color-bg-tab-active);
-    font-weight: bold;
-    color: var(--color-text-accent);
-}
-
-#tab1:checked ~ .tabs #content1,
-#tab2:checked ~ .tabs #content2,
-#tab3:checked ~ .tabs #content3 {
-    display: flex;
-    flex-direction: column;
-    height: 100%;
-    overflow: hidden;
-}
-
-/* === CHALLENGE PANEL === */
-#challenge-container {
-    width: 15%;
-    background: var(--color-bg-dark);
-    margin: 12px 12px;
-    border: 2px solid var(--color-border-panel);
-    border-radius: var(--radius-large);
-    padding: 0 12px;
-}
-
-.challenge-list {
-    list-style: none;
-    margin: 0;
-    padding: 0;
-}
-
-.challenge-item {
-    padding: 10px;
-    margin: 5px 0;
-    background: #21262d;
-    border-radius: 6px;
-    cursor: pointer;
-    transition: all 0.2s ease;
-    border-left: 3px solid transparent;
-    list-style: none;
-}
-
-.challenge-item:hover {
-    background: #30363d;
-}
-
-.challenge-item.active {
-    background: #1a3d2a;
-    border-left-color: #00ff88;
-}
-
-.challenge-name {
-    font-weight: 500;
-    margin-bottom: 5px;
-}
-
-.challenge-difficulty {
-    font-size: 0.8rem;
-    color: #0b949e;
-}
-
-.challenge-difficulty.easy {
-    color: #3fb950;
-}
-
-.challenge-difficulty.medium {
-    color: #d29922;
-}
-
-.challenge-difficulty.hard {
-    color: #f85149;
-}
-
-/* === REQUIREMENTS === */
-.requirements-section {
-    background: #161b22;
-    border: 1px solid #30363d;
-    border-radius: 8px;
-    padding: 20px;
-    margin-bottom: 20px;
-}
-
-.requirements-list {
-    margin: 0;
-    padding: 0;
-    list-style: none;
-}
-
-.requirement-item {
-    position: relative;
-    padding: 8px 0 8px 25px;
-    margin: 0;
-    border-bottom: 1px solid #30363d;
-}
-
-.requirement-item:before {
-    content: "✓";
-    color: #00ff88;
-    position: absolute;
-    left: 0;
-}
-
-/* === MODAL === */
-.modal {
-    position: absolute;
-    top: 30%;
-    left: 50%;
-    transform: translate(-50%, -30%);
-    background: #121212;
-    padding: 20px;
-    border-radius: 8px;
-    border: 1px solid #444;
-    z-index: 999;
-    color: #ccc;
-}
-
-.modal-content label {
-    display: block;
-    margin: 10px 0;
-}
-
-.modal-actions {
-    margin-top: 10px;
-    text-align: right;
-}
-
-.modal input,
-.modal select {
-    width: 100%;
-    padding: 6px;
-    margin-top: 4px;
-    background: #222;
-    border: 1px solid #444;
-    color: #fff;
-    border-radius: 4px;
-}
-
-/* === MISC === */
-#score-panel {
-    margin-top: 16px;
-}
-
-.userbox {
-    display: flex;
-    align-items: center;
-    gap: 12px;
-}
-.avatar {
-    width: 32px;
-    height: 32px;
-    border-radius: 12px;
-}
-
-    /* Paste your full design system styles here */
-    /* Use the complete CSS block you shared earlier */
-  </style>
+  <link rel="stylesheet" href="static/success.css">
 </head>
 <body>
   <div id="page-container">
@@ -582,44 +13,44 @@ input[name="tab"] {
       <h1 class="header-text">System Design Game</h1>
     </div>
 
-    <div id="main-content" style="justify-content: center; align-items: center; flex: 1; padding: 40px;">
-      <div style="max-width: 600px; width: 100%; background: var(--color-bg-component); border: 1px solid var(--color-border); border-radius: var(--radius-large); padding: 32px;">
-        <h2 style="color: var(--color-text-accent); font-size: 32px; text-align: center; margin-top: 0;">🏆 Mission Accomplished</h2>
-        <p style="text-align: center; font-size: 16px; color: var(--color-text-muted); margin-bottom: 32px;">
+    <div id="main-content" class="success-main-content">
+      <div class="success-container">
+        <h2 class="success-title">🏆 Mission Accomplished</h2>
+        <p class="success-subtitle">
           Your architecture scaled successfully and met all performance targets. Well done!
         </p>
 
-        <div class="failure-metrics" style="display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-bottom: 24px;">
-          <div class="metric-item" style="background: var(--color-bg-dark); border: 1px solid var(--color-border); padding: 16px; border-radius: var(--radius-medium); text-align: center;">
-            <div class="metric-label" style="color: var(--color-text-muted); margin-bottom: 6px;">Target RPS</div>
-            <div class="metric-value" style="font-size: 20px; font-weight: bold;">10,000</div>
+        <div class="failure-metrics">
+          <div class="metric-item">
+            <div class="metric-label">Target RPS</div>
+            <div class="metric-value">10,000</div>
           </div>
-          <div class="metric-item" style="background: var(--color-bg-dark); border: 1px solid var(--color-border); padding: 16px; border-radius: var(--radius-medium); text-align: center;">
-            <div class="metric-label" style="color: var(--color-text-muted); margin-bottom: 6px;">Achieved RPS</div>
-            <div class="metric-value" style="font-size: 20px; font-weight: bold; color: var(--color-text-accent);">10,417</div>
+          <div class="metric-item">
+            <div class="metric-label">Achieved RPS</div>
+            <div class="metric-value success">10,417</div>
           </div>
-          <div class="metric-item" style="background: var(--color-bg-dark); border: 1px solid var(--color-border); padding: 16px; border-radius: var(--radius-medium); text-align: center;">
-            <div class="metric-label" style="color: var(--color-text-muted); margin-bottom: 6px;">Max Latency</div>
-            <div class="metric-value" style="font-size: 20px; font-weight: bold;">200ms</div>
+          <div class="metric-item">
+            <div class="metric-label">Max Latency</div>
+            <div class="metric-value">200ms</div>
           </div>
-          <div class="metric-item" style="background: var(--color-bg-dark); border: 1px solid var(--color-border); padding: 16px; border-radius: var(--radius-medium); text-align: center;">
-            <div class="metric-label" style="color: var(--color-text-muted); margin-bottom: 6px;">Actual Latency</div>
-            <div class="metric-value" style="font-size: 20px; font-weight: bold; color: var(--color-text-accent);">87ms</div>
+          <div class="metric-item">
+            <div class="metric-label">Actual Latency</div>
+            <div class="metric-value success">87ms</div>
           </div>
         </div>
 
-        <div class="error-log" style="background: var(--color-bg-dark); border: 1px solid var(--color-border); border-radius: var(--radius-small); padding: 16px; font-family: monospace; font-size: 13px; color: var(--color-text-muted); max-height: 160px; overflow-y: auto;">
+        <div class="error-log">
           <div>[INFO] System initialized and scaled successfully</div>
           <div>[INFO] Load balancer handled traffic with 0% errors</div>
           <div>[INFO] Cache hit ratio: 97%</div>
           <div>[SUCCESS] SLA met - all objectives achieved</div>
         </div>
 
-        <div class="action-buttons" style="display: flex; justify-content: center; gap: 16px; margin-top: 32px;">
-          <button onclick="retryLevel()" id="retry-button" style="padding: 12px 24px; background: var(--color-button); color: var(--color-text-white); border: none; border-radius: var(--radius-medium); font-size: 14px; cursor: pointer;">
+        <div class="action-buttons">
+          <button onclick="retryLevel()" class="action-button retry-button">
             Replay Level
           </button>
-          <a href="/game-modes" style="padding: 12px 24px; background: transparent; border: 1px solid var(--color-border); color: var(--color-text-accent); border-radius: var(--radius-medium); font-size: 14px; text-decoration: none; display: inline-block;">
+          <a href="/game-modes" class="action-button menu-button">
             Main Menu
           </a>
         </div>