diff --git a/src/vn.rs b/src/vn.rs
index ebc5223..c8c9537 100644
--- a/src/vn.rs
+++ b/src/vn.rs
@@ -79,263 +79,252 @@ fn generate_html(mut scenes: Vec<Markup>, sections: Vec<Markup>, choices: Markup
 }
 
 fn global_styles() -> Markup {
+    let base_styles = r"
+        :root {
+            --border-color: #3a3a3a;
+            --box-shadow: 0 0.4vw 0.6vw rgba(0, 0, 0, 0.1);
+            --character-bg: #4a6b8a;
+            --transition-duration: 0.2s;
+            --border-radius: 1vw;
+        }";
+
+    let navigation = r"
+        .nav-controls {
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            gap: 1rem;
+            margin: 2rem 0;
+            padding: 1rem 0;
+        }
+        .nav-button {
+            width: 2.5rem;
+            height: 2.5rem;
+            border-radius: 50%;
+            border: none;
+            background: #f0f0f0;
+            cursor: pointer;
+            font-size: 1.2rem;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            transition: all var(--transition-duration) ease;
+            margin: 0;
+            padding: 0;
+        }
+        .nav-button:hover {
+            background: #e0e0e0;
+            transform: scale(1.1);
+        }
+        .nav-button:active {
+            transform: scale(0.95);
+        }
+        #section-counter {
+            font-family: system-ui, sans-serif;
+            font-size: 0.9rem;
+            color: #666;
+            margin: 0 1rem;
+            padding: 0;
+            line-height: 1;
+        }";
+
+    let container_styles = r"
+        .textbox-container {
+            width: 75%;
+            margin: 0 auto;
+            position: relative;
+            padding-top: 42.1875%; /* 16:9 Aspect Ratio */
+            background: #f8f8f8;
+            border-radius: 8px;
+            overflow: hidden;
+        }
+        .scene-container {
+            position: absolute;
+            top: 0;
+            left: 0;
+            right: 0;
+            bottom: 0;
+            z-index: 1;
+        }";
+
+    let scene_styles = r"
+        .scene-section {
+            position: absolute;
+            top: 0;
+            left: 0;
+            width: 100%;
+            height: 100%;
+            display: none;
+            aspect-ratio: 16/9;
+        }
+        .scene-section[style*='block'] {
+            display: flex !important;
+            align-items: center;
+            justify-content: center;
+        }
+        .scene-content {
+            width: 100%;
+            height: 100%;
+            position: relative;
+            overflow: hidden;
+        }
+        .scene-section img {
+            height: 100%;
+            width: auto;
+            object-fit: contain;
+            position: absolute;
+            top: 0;
+            left: 50%;
+            transform: translateX(-50%);
+        }";
+
+    let textbox_styles = r"
+        .textbox-content {
+            position: absolute;
+            bottom: 0;
+            left: 0;
+            right: 0;
+            z-index: 2;
+            background: linear-gradient(to top, rgba(0,0,0,0.5) 0%, transparent 30%);
+            padding: 2rem;
+        }
+        .visual-novel-box {
+            border: 0.2vw solid var(--border-color);
+            border-radius: var(--border-radius);
+            padding: 2vw;
+            margin: 1vh 0;
+            background: rgba(255, 255, 255, 0.9);
+            box-shadow: var(--box-shadow);
+            width: 90%;
+            min-width: 85%;
+            font-size: 1.6vw;
+            position: absolute;
+            bottom: 3vh;
+            left: 50%;
+            transform: translateX(-50%);
+        }
+        .visual-novel-box::after {
+            content: '';
+            position: absolute;
+            bottom: 10px;
+            right: 10px;
+            width: 20px;
+            height: 20px;
+            opacity: 0.5;
+        }";
+
+    let character_styles = r"
+        .character-name, .choice-name {
+            font-family: 'Georgia', serif;
+            font-size: 1.8vw;
+            font-weight: bold;
+            padding: 0 1.5vw;
+            background: var(--character-bg);
+            color: white;
+            border-radius: 0.5vw;
+            margin: 0;
+            transform: translateY(-60%);
+            width: max-content;
+        }
+        .character-name {
+            position: absolute;
+            top: 0;
+            left: 1vw;
+        }
+        .dialog-content {
+            font-size: 1.6vw;
+            line-height: 1.4;
+            max-height: 20vh;
+            overflow-y: auto;
+            padding: 1vh 0.5vw;
+        }";
+
+    let choice_styles = r"
+        .choices-section {
+            position: absolute;
+            top: 0;
+            left: 0;
+            right: 0;
+            bottom: 0;
+            z-index: 3;
+            background: rgba(0, 0, 0, 0.85);
+            padding: 2rem;
+            overflow-y: auto;
+            display: flex;
+            flex-direction: column;
+            align-items: center;
+        }
+        .choice-box {
+            width: 90%;
+            min-width: 85%;
+            border: 0.2vw solid var(--border-color);
+            border-radius: var(--border-radius);
+            padding: 2vw;
+            margin: 1vh auto;
+            background: rgba(255, 255, 255, 0.9);
+            box-shadow: var(--box-shadow);
+            position: relative;
+            transform: translateX(-50%);
+            left: 50%;
+            transition: all var(--transition-duration) ease;
+        }
+        .choice-box:hover {
+            transform: translateX(-50%) translateY(-0.5vh);
+            box-shadow: 0 0.6vw 0.8vw rgba(0, 0, 0, 0.15);
+        }
+        .choice-box:has(.choice-name) {
+            padding-top: 2.5vw;
+        }
+        .choice-button {
+            width: 100%;
+            background: none;
+            border: none;
+            padding: 1.5vh 2vw;
+            font-size: 1.6vw;
+            line-height: 1.4;
+            cursor: pointer;
+            color: #333;
+            text-align: left;
+            font-family: inherit;
+        }
+        .choice-name {
+            margin: -1.2vw 0 1vw 0;
+            position: relative;
+            z-index: 1;
+        }";
+
+    let responsive = r"
+        @media (max-width: 768px) {
+            .choice-name {
+                font-size: 1.2rem;
+                margin: -1rem 0 0.8rem 0;
+                transform: translateY(-40%);
+            }
+            .choices-section {
+                padding: 1rem;
+            }
+            .choice-box {
+                width: 95%;
+                padding: 3vw;
+            }
+            .choice-button {
+                font-size: 1.2rem;
+                padding: 1rem;
+            }
+        }";
+
     html! {
         style {
-            (maud::PreEscaped(r"
-                .nav-controls {
-                    display: flex;
-                    justify-content: center;
-                    align-items: center;
-                    gap: 1rem;
-                    margin: 2rem 0;
-                    padding: 1rem 0;
-                }
-
-                .nav-button {
-                    width: 2.5rem;
-                    height: 2.5rem;
-                    border-radius: 50%;
-                    border: none;
-                    background: #f0f0f0;
-                    cursor: pointer;
-                    font-size: 1.2rem;
-                    display: flex;
-                    align-items: center;
-                    justify-content: center;
-                    transition: all 0.2s ease;
-                    margin: 0;
-                    padding: 0;
-                }
-
-                #section-counter {
-                    font-family: system-ui, sans-serif;
-                    font-size: 0.9rem;
-                    color: #666;
-                    margin: 0 1rem;
-                    padding: 0;
-                    line-height: 1;
-                }
-
-                .nav-button:hover {
-                    background: #e0e0e0;
-                    transform: scale(1.1);
-                }
-
-                .nav-button:active {
-                    transform: scale(0.95);
-                }
-
-                .textbox-container {
-                    width: 75%;
-                    margin: 0 auto;
-                    position: relative;
-                    padding-top: 42.1875%; /* 16:9 Aspect Ratio */
-                    background: #f8f8f8;
-                    border-radius: 8px;
-                    overflow: hidden;
-                }
-
-                .scene-container {
-                    position: absolute;
-                    top: 0;
-                    left: 0;
-                    right: 0;
-                    bottom: 0;
-                    z-index: 1;
-                }
-
-                .scene-content {
-                    width: 100%;
-                    height: 100%;
-                    position: relative;
-                    overflow: hidden;
-                }
-
-                .scene-section {
-                    position: absolute;
-                    top: 0;
-                    left: 0;
-                    width: 100%;
-                    height: 100%;
-                    display: none;
-                    aspect-ratio: 16/9;
-                }
-
-                .scene-section[style*='block'] {
-                    display: flex !important;
-                    align-items: center;
-                    justify-content: center;
-                }
-
-                .scene-section img {
-                    height: 100%;
-                    width: auto;
-                    object-fit: contain;
-                    position: absolute;
-                    top: 0;
-                    left: 50%;
-                    transform: translateX(-50%);
-                }
-
-                .textbox-content {
-                    position: absolute;
-                    bottom: 0;
-                    left: 0;
-                    right: 0;
-                    z-index: 2;
-                    background: linear-gradient(to top, rgba(0,0,0,0.5) 0%, transparent 30%);
-                    padding: 2rem;
-                }
-
-                .visual-novel-box {
-                    border: 0.2vw solid #3a3a3a;
-                    border-radius: 1vw;
-                    padding: 2vw;
-                    margin: 1vh 0;
-                    background: rgba(255, 255, 255, 0.9);
-                    box-shadow: 0 0.4vw 0.6vw rgba(0, 0, 0, 0.1);
-                    width: 90%;
-                    min-width: 85%;
-                    font-size: 1.6vw;
-                    position: absolute;
-                    bottom: 3vh;
-                    left: 50%;
-                    transform: translateX(-50%);
-                }
-
-                .character-name {
-                    font-family: 'Georgia', serif;
-                    font-size: 1.8vw;
-                    font-weight: bold;
-                    padding: 0 1.5vw;
-                    background: #4a6b8a;
-                    color: white;
-                    border-radius: 0.5vw;
-                    margin: 0;
-                    transform: translateY(-60%);
-                    position: absolute;
-                    top: 0;
-                    left: 1vw;
-                }
-
-                .dialog-content {
-                    font-size: 1.6vw;
-                    line-height: 1.4;
-                    max-height: 20vh;
-                    overflow-y: auto;
-                    padding: 1vh 0.5vw;
-                }
-
-                .visual-novel-box::after {
-                    content: '';
-                    position: absolute;
-                    bottom: 10px;
-                    right: 10px;
-                    width: 20px;
-                    height: 20px;
-                    opacity: 0.5;
-                }
-
-                .choices-section {
-                    position: absolute;
-                    top: 0;
-                    left: 0;
-                    right: 0;
-                    bottom: 0;
-                    z-index: 3;
-                    background: rgba(0, 0, 0, 0.85);
-                    padding: 2rem;
-                    overflow-y: auto;
-                    display: flex;
-                    flex-direction: column;
-                    align-items: center;
-                }
-
-                .choice-box:hover {
-                    transform: translateX(-50%) translateY(-0.5vh);
-                    box-shadow: 0 0.6vw 0.8vw rgba(0, 0, 0, 0.15);
-                }
-
-                .choices-section input[type='submit'] {
-                    width: 100%;
-                    padding: 1rem;
-                    border: none;
-                    background: none;
-                    cursor: pointer;
-                    font-size: 1.1rem;
-                    text-align: left;
-                }
-
-                .choice-name {
-                    font-family: 'Georgia', serif;
-                    font-size: 1.8vw;
-                    font-weight: bold;
-                    padding: 0 1.5vw;
-                    background: #4a6b8a;
-                    color: white;
-                    border-radius: 0.5vw;
-                    margin: -1.2vw 0 1vw 0;
-                    transform: translateY(-60%);
-                    position: relative;
-                    z-index: 1;
-                    width: max-content;
-                }
-
-                .choice-box {
-                    width: 90%;
-                    min-width: 85%;
-                    border: 0.2vw solid #3a3a3a;
-                    border-radius: 1vw;
-                    padding: 2vw;
-                    margin: 1vh auto;
-                    background: rgba(255, 255, 255, 0.9);
-                    box-shadow: 0 0.4vw 0.6vw rgba(0, 0, 0, 0.1);
-                    position: relative;
-                    transform: translateX(-50%);
-                    left: 50%;
-                }
-
-                @media (max-width: 768px) {
-                    .choice-name {
-                        font-size: 1.2rem;
-                        margin: -1rem 0 0.8rem 0;
-                        transform: translateY(-40%);
-                    }
-                }
-
-                .choice-box:has(.choice-name) {
-                    padding-top: 2.5vw;
-                }
-
-                .choice-button {
-                    width: 100%;
-                    background: none;
-                    border: none;
-                    padding: 1.5vh 2vw;
-                    font-size: 1.6vw;
-                    line-height: 1.4;
-                    cursor: pointer;
-                    color: #333;
-                    text-align: left;
-                    font-family: inherit;
-                }
-
-                @media (max-width: 768px) {
-                    .choices-section {
-                        padding: 1rem;
-                    }
-
-                    .choice-box {
-                        width: 95%;
-                        padding: 3vw;
-                    }
-
-                    .choice-button {
-                        font-size: 1.2rem;
-                        padding: 1rem;
-                    }
-                }
-            "))
+            (maud::PreEscaped([
+                base_styles,
+                navigation,
+                container_styles,
+                scene_styles,
+                textbox_styles,
+                character_styles,
+                choice_styles,
+                responsive
+            ].join("")))
         }
     }
 }