Reduction

frontend/app/assets/css/shared.scss

@@ -1,17 +1,13 @@
-// Shared TUI transition mixin
+/* Global rules shared across pages/components (imported once via nuxt.config css). */
-@mixin tui-transition($steps: 2) {
-  transition: all 0.1s steps($steps, end);
-}
 
-// Box-drawing content string for borders (top/bottom frame lines)
+/* Pages that opt out of the header sprite hide the TableHeader undertable area.
-$box-line-top: "═══════════════════";
+   Selector is prefixed with the element type so it always outranks TableHeader's
-
+   scoped `.undertable-wrapper { display: flex }` regardless of stylesheet order. */
-/* Global rules - no-sprite pages hide the undertable sprite area */
+div.no-sprite .undertable-wrapper {
-.no-sprite .undertable-wrapper {
   display: none;
 }
 
-// Dropdown transition keyframes (used by LanguageSelector and ThemeSelector)
+/* Dropdown transition (used by LanguageSelector and ThemeSelector). */
 .dropdown-enter-active, .dropdown-leave-active {
   transition: opacity 0.2s ease, transform 0.2s ease;
 }
@@ -19,14 +15,3 @@ $box-line-top: "═══════════════════";
   opacity: 0;
   transform: translateY(-8px);
 }
-
-// Dropdown button shared styles
-.tui-dropdown-button {
-  background: var(--color-background-fore);
-  color: var(--color-text);
-  font-size: 1em;
-  border: 1px solid var(--color-border-color);
-  padding: 8px 12px;
-  border-radius: 0;
-  cursor: pointer;
-}

frontend/app/components/parts/site_options/LanguageSelector.vue

@@ -79,14 +79,6 @@ border: 1px solid var(--color-border-color);
     background-color: var(--color-selected);
   }
 }
-/* Dropdown transitions */
-.dropdown-enter-active, .dropdown-leave-active {
-  transition: opacity 0.2s ease, transform 0.2s ease;
-}
-.dropdown-enter-from, .dropdown-leave-to {
-  opacity: 0;
-  transform: translateY(-8px);
-}
 
 .dropdown {
   z-index: 10;

frontend/app/components/parts/site_options/ThemeSelector.vue

@@ -157,15 +157,6 @@ border: 1px solid var(--color-border-color);
    margin-right: 15px;
 }
 
-/* Dropdown transitions */
-.dropdown-enter-active, .dropdown-leave-active {
-  transition: opacity 0.2s ease, transform 0.2s ease;
-}
-.dropdown-enter-from, .dropdown-leave-to {
-  opacity: 0;
-  transform: translateY(-8px);
-}
-
 /* Dropdown */
 .dropdown {
  z-index: 10;
@@ -234,16 +225,6 @@ border: 1px solid var(--color-border-color);
   }
 }
 
-.two-columns {
-    display: flex;
-    flex-grow: 1;
-    flex-direction: row;
-}
-
-.section {
-    flex-grow: 1;
-}
-
 .stacked {
     flex-direction: column;
 }

frontend/app/pages/admin/login.vue

@@ -187,9 +187,3 @@ const onSubmit = async () => {
   }
 }
 </style>
-
-<style lang="scss">
-.no-sprite .undertable-wrapper {
-  display: none;
-}
-</style>

frontend/app/pages/art/[slug].vue

@@ -87,8 +87,4 @@ useSeo({
         font-size: 1.4rem;
     }
 }
-
-.no-sprite .undertable-wrapper {
-  display: none;
-}
 </style>

frontend/app/pages/art/index.vue

@@ -265,9 +265,3 @@ const displayedArt = computed(() => {
   }
 }
 </style>
-
-<style lang="scss">
-.no-sprite .undertable-wrapper {
-  display: none;
-}
-</style>

frontend/app/pages/blog/[slug].vue

@@ -91,8 +91,4 @@ useSeo({
         font-size: 1.4rem;
     }
 }
-
-.no-sprite .undertable-wrapper {
-  display: none;
-}
 </style>

frontend/app/pages/blog/index.vue

@@ -193,9 +193,3 @@ const displayedPosts = computed(() => {
   }
 }
 </style>
-
-<style lang="scss">
-.no-sprite .undertable-wrapper {
-  display: none;
-}
-</style>

frontend/app/pages/contact/index.vue

@@ -73,9 +73,3 @@ h1 {
     }
 }
 </style>
-
-<style lang="scss">
-.no-sprite .undertable-wrapper {
-  display: none;
-}
-</style>

frontend/app/pages/index.vue

@@ -320,10 +320,6 @@ const sectionTargets = {
     margin-bottom: 0;
   }
 
-  .tui-frame:last-child {
-    margin-bottom: 0;
-  }
-
   @media screen and (min-width: 1200px) {
     margin-top: 290px;
   }
@@ -440,18 +436,6 @@ const sectionTargets = {
   }
 }
 
-.project-card-corner {
-  position: absolute;
-  width: 14px;
-  height: 14px;
-  border-color: #cfcfcf;
-
-  &.tl { top: -1px; left: -1px; border-top: 2px solid; border-left: 2px solid; }
-  &.tr { top: -1px; right: -1px; border-top: 2px solid; border-right: 2px solid; }
-  &.bl { bottom: -1px; left: -1px; border-bottom: 2px solid; border-left: 2px solid; }
-  &.br { bottom: -1px; right: -1px; border-bottom: 2px solid; border-right: 2px solid; }
-}
-
 .project-title {
   font-family: 'Hurmit', monospace;
   color: inherit;
@@ -501,137 +485,6 @@ const sectionTargets = {
   letter-spacing: 0.5px;
 }
 
-.stats-section {
-  margin-top: 32px;
-}
-
-.stats-grid {
-  display: grid;
-  grid-template-columns: repeat(3, 1fr);
-  gap: 10px;
-}
-
-.stat-card {
-  position: relative;
-  background: var(--color-background-fore);
-  border: 2px solid var(--color-border-color);
-  box-shadow: 
-    inset 1px -1px 0px 0px rgba(0,0,0,0.3),
-    4px -4px 0px 0px var(--color-container-shadow);
-  padding: 0;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  text-align: center;
-  gap: 0;
-  overflow: hidden;
-  transition: all 0.1s steps(2, end);
-
-  &:hover {
-    border-color: var(--color-link);
-    box-shadow: 
-      inset 1px -1px 0px 0px rgba(0,0,0,0.3),
-      4px -4px 0px 0px var(--color-link);
-  }
-
-  .stat-card-corner {
-    position: absolute;
-    width: 12px;
-    height: 12px;
-    border-color: #cfcfcf;
-
-    &.tl { top: -1px; left: -1px; border-top: 2px solid; border-left: 2px solid; }
-    &.tr { top: -1px; right: -1px; border-top: 2px solid; border-right: 2px solid; }
-    &.bl { bottom: -1px; left: -1px; border-bottom: 2px solid; border-left: 2px solid; }
-    &.br { bottom: -1px; right: -1px; border-bottom: 2px solid; border-right: 2px solid; }
-  }
-}
-
-.stat-card-frame-top {
-  position: absolute;
-  top: -2px;
-  left: 14px;
-  right: 14px;
-  height: 0;
-  color: var(--color-border-color);
-  font-family: 'Hurmit', monospace;
-  font-size: 0;
-  line-height: 0;
-  white-space: nowrap;
-
-  &::before {
-    content: "═════";
-  }
-}
-
-.stat-card-frame-bottom {
-  position: absolute;
-  bottom: -2px;
-  left: 14px;
-  right: 14px;
-  height: 0;
-  color: var(--color-border-color);
-  font-family: 'Hurmit', monospace;
-  font-size: 0;
-  line-height: 0;
-  white-space: nowrap;
-
-  &::before {
-    content: "═════";
-  }
-}
-
-.stat-card-header {
-  background-color: var(--color-link);
-  color: var(--color-background-fore);
-  padding: 3px 12px;
-  font-family: 'Hurmit', monospace;
-  font-size: 0.55rem;
-  letter-spacing: 2px;
-  text-transform: uppercase;
-  width: 100%;
-  text-align: center;
-  box-shadow: inset 0 -2px 0px 0px rgba(0,0,0,0.3);
-}
-
-.stat-card-content {
-  padding: 16px 10px;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  text-align: center;
-  gap: 8px;
-  width: 100%;
-}
-
-.stat-pixel-art {
-  width: 36px;
-  height: 36px;
-  margin-bottom: 2px;
-  fill: var(--color-link);
-  filter: drop-shadow(0 0 4px var(--color-link));
-  image-rendering: pixelated;
-}
-
-.stat-number {
-  font-family: 'Hurmit', monospace;
-  font-size: 1.6rem;
-  color: var(--color-link);
-  text-shadow: 0 0 8px var(--color-link), 0 0 4px var(--color-link);
-  font-weight: bold;
-  letter-spacing: 2px;
-}
-
-.stat-label {
-  font-family: 'Hurmit', monospace;
-  color: var(--color-text);
-  font-size: 0.65rem;
-  line-height: 1.35;
-  text-transform: uppercase;
-  letter-spacing: 0.5px;
-  opacity: 0.8;
-}
-
 .tui-list {
   list-style: none;
   margin: 0;
@@ -765,16 +618,7 @@ const sectionTargets = {
     pointer-events: none;
 }
 
-@keyframes blink-cursor {
-  0%, 50% { opacity: 1; }
-  51%, 100% { opacity: 0; }
-}
-
 @media (max-width: 900px) {
-  .stats-grid {
-    grid-template-columns: repeat(2, 1fr);
-  }
-  
   .grid {
       grid-template-columns: repeat(2, minmax(200px, 1fr));
   }
@@ -811,33 +655,6 @@ const sectionTargets = {
     font-size: 0.82rem;
   }
 
-  .stats-grid {
-    grid-template-columns: repeat(2, 1fr);
-    gap: 8px;
-  }
-
-  .stat-card-header {
-      padding: 2px 8px;
-      font-size: 0.5rem;
-  }
-
-  .stat-card-content {
-      padding: 12px 6px;
-  }
-
-  .stat-number {
-    font-size: 1.4rem;
-  }
-
-  .stat-label {
-    font-size: 0.6rem;
-  }
-
-  .stat-pixel-art {
-    width: 28px;
-    height: 28px;
-  }
-
   .grid {
       grid-template-columns: 1fr;
       padding: 16px 0;
@@ -849,10 +666,6 @@ const sectionTargets = {
 }
 
 @media (max-width: 400px) {
-  .stats-grid {
-    grid-template-columns: 1fr;
-  }
-
   .section-title {
     font-size: 1rem;
     padding-left: 0;

frontend/app/pages/projects/hibolia/order.vue

@@ -581,9 +581,3 @@ const onSubmit = async () => {
   }
 }
 </style>
-
-<style lang="scss">
-.no-sprite .undertable-wrapper {
-  display: none;
-}
-</style>

frontend/app/pages/projects/hibolia/thanks.vue

@@ -113,9 +113,3 @@ const localePath = useLocalePath();
   filter: blur(10px);
 }
 </style>
-
-<style lang="scss">
-.no-sprite .undertable-wrapper {
-  display: none;
-}
-</style>

frontend/app/pages/projects/index.vue

@@ -267,9 +267,3 @@ function navigateToProject(project) {
   }
 }
 </style>
-
-<style lang="scss">
-.no-sprite .undertable-wrapper {
-  display: none;
-}
-</style>

frontend/nuxt.config.ts

@@ -8,7 +8,8 @@ export default defineNuxtConfig({
   css: [
     '~/assets/css/colors.scss',
     '~/assets/css/fonts.scss',
-    '~/assets/css/main.scss'
+    '~/assets/css/main.scss',
+    '~/assets/css/shared.scss'
   ],
 
   runtimeConfig: {