ywana-core8 0.2.20 → 0.2.21

package/dist/index.css

@@ -5225,6 +5225,7 @@ td.actions {
     }
 }.menu-icon {
   position: relative;
+  display: inline-block;
 }
 
 /* Solución simple: z-index muy alto para que aparezca por encima de todo */
@@ -5242,8 +5243,6 @@ td.actions {
 .menu-icon > menu {
   z-index: 9999;
   position: absolute;
-  top: 3rem;
-  left: 0px;
   margin: 0;
   border: solid 1px var(--divider-color);
   background-color: var(--paper-color);
@@ -5253,16 +5252,68 @@ td.actions {
   max-height: 50vh;
   overflow: auto;
   box-shadow: var(--shadow1);
+  border-radius: 4px;
+}
+
+/* Position: Bottom Left (default) */
+.menu-icon > menu.position-bottom-left {
+  top: calc(100% + 0.25rem);
+  left: 0;
+}
+
+/* Position: Bottom Right */
+.menu-icon > menu.position-bottom-right {
+  top: calc(100% + 0.25rem);
+  right: 0;
+}
+
+/* Position: Top Left */
+.menu-icon > menu.position-top-left {
+  bottom: calc(100% + 0.25rem);
+  left: 0;
+}
+
+/* Position: Top Right */
+.menu-icon > menu.position-top-right {
+  bottom: calc(100% + 0.25rem);
+  right: 0;
 }
 
+/* Position: Left */
+.menu-icon > menu.position-left {
+  right: calc(100% + 0.25rem);
+  top: 0;
+}
+
+/* Position: Right */
+.menu-icon > menu.position-right {
+  left: calc(100% + 0.25rem);
+  top: 0;
+}
+
+/* Position: Top (centered) */
+.menu-icon > menu.position-top {
+  bottom: calc(100% + 0.25rem);
+  left: 50%;
+  transform: translateX(-50%);
+}
+
+/* Position: Bottom (centered) */
+.menu-icon > menu.position-bottom {
+  top: calc(100% + 0.25rem);
+  left: 50%;
+  transform: translateX(-50%);
+}
+
+/* Backwards compatibility */
 .menu-icon > menu.alignRight {
-  left: unset;
-  right: 0px;
+  top: calc(100% + 0.25rem);
+  right: 0;
 }
 
 .menu-icon > menu.alignLeft {
-  left: 0px;
-  right: unset;
+  top: calc(100% + 0.25rem);
+  left: 0;
 }
 
 .menu-icon > menu ul {
@@ -5319,6 +5370,34 @@ td.actions {
   height: 1px;
   border-top: solid 1px var(--divider-color);
 }
+
+/* ============================================
+   COMPACT MENU VARIANT
+   ============================================ */
+
+.menu-icon > menu.menu-compact {
+  min-width: 6rem;
+  max-width: 12rem;
+  font-size: 0.85rem;
+}
+
+.menu-icon > menu.menu-compact li {
+  min-height: 2rem;
+  padding: 0 0.4rem;
+}
+
+.menu-icon > menu.menu-compact .menu-item > label {
+  font-size: 0.75rem;
+  padding: 0 0.4rem 0 0;
+}
+
+.menu-icon > menu.menu-compact .menu-item > .meta {
+  font-size: 0.7rem;
+}
+
+.menu-icon > menu.menu-compact .menu-separator {
+  margin: 0.2rem 0;
+}
 /* ActionsCell Component Styles */
 
 .actions-cell {
@@ -16448,35 +16527,10 @@ li.selected,
 .window--resizing * {
     user-select: none !important;
 }
-/* ApplicationMenu - Positioned over workspace only */
-
-.application-menu-overlay {
-    position: absolute;
-    top: 0;
-    left: 0;
-    right: 0;
-    bottom: 0; /* Covers entire workspace container */
-    background: rgba(0, 0, 0, 0.16);
-    backdrop-filter: blur(1px);
-    z-index: 10000; /* Always above all windows */
-    display: flex;
-    align-items: flex-end;
-    justify-content: flex-start;
-    animation: fadeIn 0.2s ease-out;
-    pointer-events: auto; /* Ensure menu is clickable */
-    padding: 0 0 0px 15px; /* Espacio para el taskbar y margen izquierdo */
-}
-
-@keyframes fadeIn {
-    from {
-        opacity: 0;
-    }
-    to {
-        opacity: 1;
-    }
-}
+/* LaunchPad - Full-screen application launcher inspired by macOS */
+/* Note: Overlay styles are now managed by desktop.css DesktopOverlayLayer */
 
-.application-menu {
+.launchpad {
     background: #ffffff;
     border-radius: 12px 12px 0 0;
     box-shadow: 0 -10px 30px rgba(0, 0, 0, 0.3);
@@ -16507,7 +16561,7 @@ li.selected,
 }
 
 /* Header */
-.application-menu__header {
+.launchpad__header {
     grid-area: header;
     display: flex;
     align-items: center;
@@ -16518,20 +16572,20 @@ li.selected,
     min-height: 40px;
 }
 
-.application-menu__header-controls {
+.launchpad__header-controls {
     display: flex;
     align-items: center;
     gap: 6px;
 }
 
-.application-menu__header h2 {
+.launchpad__header h2 {
     margin: 0;
     color: #333;
     font-size: 24px;
     font-weight: 600;
 }
 
-.application-menu__view-toggle {
+.launchpad__view-toggle {
     background: none;
     border: 1px solid #ddd;
     font-size: 14px;
@@ -16547,19 +16601,19 @@ li.selected,
     justify-content: center;
 }
 
-.application-menu__view-toggle:hover {
+.launchpad__view-toggle:hover {
     background: #e9ecef;
     color: #333;
     border-color: #ccc;
 }
 
-.application-menu__view-toggle.active {
+.launchpad__view-toggle.active {
     background: #1976d2;
     color: white;
     border-color: #1976d2;
 }
 
-.application-menu__close {
+.launchpad__close {
     background: none;
     border: none;
     font-size: 20px;
@@ -16575,19 +16629,19 @@ li.selected,
     justify-content: center;
 }
 
-.application-menu__close:hover {
+.launchpad__close:hover {
     background: #e0e0e0;
     color: #333;
 }
 
 /* Search */
-.application-menu__search {
+.launchpad__search {
     grid-area: search;
     padding: 12px 20px;
     border-bottom: 1px solid #e0e0e0;
 }
 
-.application-menu__search-input {
+.launchpad__search-input {
     width: 100%;
     padding: 10px 14px;
     border: 1px solid #ddd;
@@ -16597,97 +16651,97 @@ li.selected,
     transition: border-color 0.2s ease;
 }
 
-.application-menu__search-input:focus {
+.launchpad__search-input:focus {
     border-color: #1976d2;
     box-shadow: 0 0 0 2px rgba(25, 118, 210, 0.1);
 }
 
 /* Condensed Mode */
-.application-menu--condensed .application-menu__header {
+.launchpad--condensed .launchpad__header {
     padding: 6px 12px;
     min-height: 32px;
 }
 
-.application-menu--condensed .application-menu__search {
+.launchpad--condensed .launchpad__search {
     padding: 8px 16px;
 }
 
-.application-menu--condensed .application-menu__search-input {
+.launchpad--condensed .launchpad__search-input {
     padding: 8px 12px;
     font-size: 13px;
 }
 
-.application-menu--condensed .application-menu__content {
+.launchpad--condensed .launchpad__content {
     padding: 12px 16px;
 }
 
-.application-menu--condensed .application-menu__categories {
+.launchpad--condensed .launchpad__categories {
     padding: 4px;
 }
 
-.application-menu--condensed .application-menu__category {
+.launchpad--condensed .launchpad__category {
     width: 36px;
     height: 36px;
     padding: 6px;
     margin: 1px;
 }
 
-.application-menu--condensed .category-icon {
+.launchpad--condensed .category-icon {
     font-size: 16px;
 }
 
-.application-menu--condensed .application-menu__category-section {
+.launchpad--condensed .launchpad__category-section {
     margin-bottom: 20px;
 }
 
-.application-menu--condensed .category-title {
+.launchpad--condensed .category-title {
     font-size: 14px;
     margin-bottom: 8px;
 }
 
-.application-menu--condensed .application-menu__apps-grid {
+.launchpad--condensed .launchpad__apps-grid {
     gap: 8px;
     grid-template-columns: repeat(auto-fill, minmax(75px, 1fr));
 }
 
-.application-menu--condensed .application-menu__app--grid {
+.launchpad--condensed .launchpad__app--grid {
     padding: 8px 6px;
 }
 
-.application-menu--condensed .application-menu__app--grid .app-icon {
+.launchpad--condensed .launchpad__app--grid .app-icon {
     font-size: 28px;
     margin-bottom: 4px;
 }
 
-.application-menu--condensed .application-menu__app--grid .app-name {
+.launchpad--condensed .launchpad__app--grid .app-name {
     font-size: 11px;
 }
 
-.application-menu--condensed .application-menu__apps-list {
+.launchpad--condensed .launchpad__apps-list {
     gap: 1px;
 }
 
-.application-menu--condensed .application-menu__app--list {
+.launchpad--condensed .launchpad__app--list {
     padding: 6px 12px;
     gap: 10px;
 }
 
-.application-menu--condensed .application-menu__app--list .app-icon {
+.launchpad--condensed .launchpad__app--list .app-icon {
     font-size: 22px;
     min-width: 22px;
 }
 
-.application-menu--condensed .application-menu__app--list .app-name {
+.launchpad--condensed .launchpad__app--list .app-name {
     font-size: 12px;
     margin-bottom: 1px;
 }
 
-.application-menu--condensed .application-menu__app--list .app-description {
+.launchpad--condensed .launchpad__app--list .app-description {
     font-size: 10px;
 }
 
 /* Main Grid Layout */
-.application-menu__main {
+.launchpad__main {
     grid-area: main;
     display: grid;
     grid-template-columns: 60px 1fr;
@@ -16696,12 +16750,12 @@ li.selected,
     overflow: hidden;
 }
 
-.application-menu--condensed .application-menu__main {
+.launchpad--condensed .launchpad__main {
     grid-template-columns: 48px 1fr;
 }
 
 /* Sidebar */
-.application-menu__sidebar {
+.launchpad__sidebar {
     grid-area: sidebar;
     background: #f8f9fa;
     border-right: 1px solid #e0e0e0;
@@ -16711,7 +16765,7 @@ li.selected,
 }
 
 /* Categories */
-.application-menu__categories {
+.launchpad__categories {
     flex: 1;
     padding: 8px;
     overflow-y: auto;
@@ -16719,24 +16773,24 @@ li.selected,
     scrollbar-color: #ccc transparent;
 }
 
-.application-menu__categories::-webkit-scrollbar {
+.launchpad__categories::-webkit-scrollbar {
     width: 6px;
 }
 
-.application-menu__categories::-webkit-scrollbar-track {
+.launchpad__categories::-webkit-scrollbar-track {
     background: transparent;
 }
 
-.application-menu__categories::-webkit-scrollbar-thumb {
+.launchpad__categories::-webkit-scrollbar-thumb {
     background: #ccc;
     border-radius: 3px;
 }
 
-.application-menu__categories::-webkit-scrollbar-thumb:hover {
+.launchpad__categories::-webkit-scrollbar-thumb:hover {
     background: #999;
 }
 
-.application-menu__category {
+.launchpad__category {
     display: flex;
     align-items: center;
     justify-content: center;
@@ -16755,12 +16809,12 @@ li.selected,
     position: relative;
 }
 
-.application-menu__category:hover {
+.launchpad__category:hover {
     background: #e9ecef;
     color: #333;
 }
 
-.application-menu__category.active {
+.launchpad__category.active {
     background: #e3f2fd;
     color: #1976d2;
     font-weight: 500;
@@ -16776,7 +16830,7 @@ li.selected,
 }
 
 /* Content */
-.application-menu__content {
+.launchpad__content {
     grid-area: content;
     overflow-y: auto;
     padding: 20px 24px;
@@ -16784,25 +16838,25 @@ li.selected,
     scrollbar-color: #ccc transparent;
 }
 
-.application-menu__content::-webkit-scrollbar {
+.launchpad__content::-webkit-scrollbar {
     width: 8px;
 }
 
-.application-menu__content::-webkit-scrollbar-track {
+.launchpad__content::-webkit-scrollbar-track {
     background: #f1f1f1;
     border-radius: 4px;
 }
 
-.application-menu__content::-webkit-scrollbar-thumb {
+.launchpad__content::-webkit-scrollbar-thumb {
     background: #ccc;
     border-radius: 4px;
 }
 
-.application-menu__content::-webkit-scrollbar-thumb:hover {
+.launchpad__content::-webkit-scrollbar-thumb:hover {
     background: #999;
 }
 
-.application-menu__search-results h3,
+.launchpad__search-results h3,
 .category-title {
     margin: 0 0 12px 0;
     color: #333;
@@ -16810,23 +16864,23 @@ li.selected,
     font-weight: 600;
 }
 
-.application-menu__category-section {
+.launchpad__category-section {
     margin-bottom: 32px;
 }
 
-.application-menu__category-section:last-child {
+.launchpad__category-section:last-child {
     margin-bottom: 0;
 }
 
 /* Apps Grid */
-.application-menu__apps-grid {
+.launchpad__apps-grid {
     display: grid;
     grid-template-columns: repeat(auto-fill, minmax(90px, 1fr));
     gap: 12px;
     max-width: 100%;
 }
 
-.application-menu__app--grid {
+.launchpad__app--grid {
     display: flex;
     flex-direction: column;
     align-items: center;
@@ -16839,20 +16893,20 @@ li.selected,
     border: 1px solid transparent;
 }
 
-.application-menu__app--grid:hover {
+.launchpad__app--grid:hover {
     background: #f8f9fa;
     border-color: #e0e0e0;
     transform: translateY(-1px);
     box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
 }
 
-.application-menu__app--grid .app-icon {
+.launchpad__app--grid .app-icon {
     font-size: 36px;
     margin-bottom: 6px;
     line-height: 1;
 }
 
-.application-menu__app--grid .app-name {
+.launchpad__app--grid .app-name {
     font-size: 12px;
     font-weight: 500;
     color: #333;
@@ -16862,14 +16916,14 @@ li.selected,
 }
 
 /* Apps List */
-.application-menu__apps-list {
+.launchpad__apps-list {
     display: flex;
     flex-direction: column;
     gap: 2px;
     max-width: 100%;
 }
 
-.application-menu__app--list {
+.launchpad__app--list {
     display: flex;
     align-items: center;
     padding: 10px 16px;
@@ -16882,12 +16936,12 @@ li.selected,
     margin-bottom: 2px;
 }
 
-.application-menu__app--list:hover {
+.launchpad__app--list:hover {
     background: #f0f7ff;
     color: #1976d2;
 }
 
-.application-menu__app--list .app-icon {
+.launchpad__app--list .app-icon {
     font-size: 28px;
     min-width: 28px;
     line-height: 1;
@@ -16896,13 +16950,13 @@ li.selected,
     justify-content: center;
 }
 
-.application-menu__app--list .app-info {
+.launchpad__app--list .app-info {
     flex: 1;
     text-align: left;
     min-width: 0;
 }
 
-.application-menu__app--list .app-name {
+.launchpad__app--list .app-name {
     font-size: 14px;
     font-weight: 500;
     color: #333;
@@ -16913,7 +16967,7 @@ li.selected,
     text-overflow: ellipsis;
 }
 
-.application-menu__app--list .app-description {
+.launchpad__app--list .app-description {
     font-size: 12px;
     color: #666;
     line-height: 1.3;
@@ -16923,17 +16977,17 @@ li.selected,
     text-overflow: ellipsis;
 }
 
-.application-menu__app--list:hover .app-name {
+.launchpad__app--list:hover .app-name {
     color: #1976d2;
 }
 
-.application-menu__app--list:hover .app-description {
+.launchpad__app--list:hover .app-description {
     color: #1565c0;
     opacity: 1;
 }
 
 /* Legacy support for old class names */
-.application-menu__app {
+.launchpad__app {
     display: flex;
     flex-direction: column;
     align-items: center;
@@ -16946,7 +17000,7 @@ li.selected,
     border: 1px solid transparent;
 }
 
-.application-menu__app:hover {
+.launchpad__app:hover {
     background: #f8f9fa;
     border-color: #e0e0e0;
     transform: translateY(-1px);
@@ -16969,37 +17023,37 @@ li.selected,
 }
 
 /* No Results */
-.application-menu__no-results {
+.launchpad__no-results {
     text-align: center;
     padding: 60px 20px;
     color: #666;
 }
 
-.application-menu__no-results h3 {
+.launchpad__no-results h3 {
     margin: 0 0 8px 0;
     color: #333;
     font-size: 20px;
 }
 
-.application-menu__no-results p {
+.launchpad__no-results p {
     margin: 0;
     font-size: 16px;
 }
 
 /* Responsive */
 @media (max-width: 768px) {
-    .application-menu {
+    .launchpad {
         width: 95%;
         height: 95%;
         max-height: 100%; /* Constrained by workspace container */
         margin: 5px;
     }
 
-    .application-menu__main {
+    .launchpad__main {
         grid-template-columns: 50px 1fr;
     }
 
-    .application-menu__category {
+    .launchpad__category {
         padding: 8px;
         font-size: 13px;
         height: 40px;
@@ -17009,12 +17063,12 @@ li.selected,
         font-size: 18px;
     }
 
-    .application-menu__apps-grid {
+    .launchpad__apps-grid {
         grid-template-columns: repeat(auto-fill, minmax(80px, 1fr));
         gap: 12px;
     }
 
-    .application-menu__app {
+    .launchpad__app {
         padding: 12px 8px;
     }
 
@@ -17026,16 +17080,16 @@ li.selected,
         font-size: 12px;
     }
 
-    .application-menu__search,
-    .application-menu__content {
+    .launchpad__search,
+    .launchpad__content {
         padding: 16px;
     }
 }
 
 @media (max-width: 480px) {
-    /* ApplicationMenu overlay covers entire workspace on mobile */
+    /* LaunchPad overlay covers entire workspace on mobile */
 
-    .application-menu__main {
+    .launchpad__main {
         grid-template-columns: 1fr;
         grid-template-rows: auto 1fr;
         grid-template-areas:
@@ -17043,12 +17097,12 @@ li.selected,
             "content";
     }
 
-    .application-menu__sidebar {
+    .launchpad__sidebar {
         border-right: none;
         border-bottom: 1px solid #e0e0e0;
     }
 
-    .application-menu__categories {
+    .launchpad__categories {
         display: flex;
         flex-direction: row;
         overflow-x: auto;
@@ -17057,7 +17111,7 @@ li.selected,
         gap: 8px;
     }
 
-    .application-menu__category {
+    .launchpad__category {
         flex-shrink: 0;
         white-space: nowrap;
         margin: 0;
@@ -17113,7 +17167,11 @@ li.selected,
 }
 
 .desktop-taskbar {
-    
+    position: relative;
+    z-index: 10000; /* Above everything: workspace (1), windows (100-9999), overlays (9000-9999) */
+    background: rgba(0, 0, 0, 0.8); /* Default dark background */
+    backdrop-filter: blur(10px);
+
     & .icon {
         color: white;
         & :hover {
@@ -17121,6 +17179,45 @@ li.selected,
             background-color: rgba(255, 255, 255, 0.1);
         }
     }
+
+    /* Ensure menu inside taskbar appears above everything */
+    & .menu-icon > menu {
+        z-index: 10001; /* Above taskbar itself */
+        /* Dark theme for taskbar menus */
+        background-color: rgba(40, 40, 40, 0.98);
+        backdrop-filter: blur(10px);
+        border-color: rgba(255, 255, 255, 0.15);
+        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5);
+    }
+
+    /* Menu items styling for dark theme */
+    & .menu-icon > menu .menu-item > label {
+        color: rgba(255, 255, 255, 0.95);
+    }
+
+    & .menu-icon > menu .menu-item > .icon {
+        color: rgba(255, 255, 255, 0.85);
+    }
+
+    & .menu-icon > menu .menu-item > .meta {
+        color: rgba(255, 255, 255, 0.6);
+    }
+
+    /* Hover state for menu items */
+    & .menu-icon > menu li:hover {
+        background-color: rgba(255, 255, 255, 0.15);
+    }
+
+    /* Disabled items */
+    & .menu-icon > menu .menu-item.disabled > label,
+    & .menu-icon > menu .menu-item.disabled > .icon {
+        color: rgba(255, 255, 255, 0.3);
+    }
+
+    /* Separator */
+    & .menu-icon > menu .menu-separator {
+        border-top-color: rgba(255, 255, 255, 0.15);
+    }
 }
 
 
@@ -17141,863 +17238,2885 @@ li.selected,
     background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
 }
 
-/* Responsive design */
-@media (max-width: 768px) {
-    .desktop {
-        font-size: 14px;
-    }
-}
+/* ============================================
+   DESKTOP OVERLAY SYSTEM
+   Z-INDEX LAYERS:
+   - Workspace:        1
+   - Windows:          100-9999
+   - Desktop Overlays: 9000-9999
+   - Taskbar:          10000
+   - Taskbar Menus:    10001
+   ============================================ */
 
-@media (max-width: 480px) {
-    .desktop {
-        font-size: 12px;
-    }
+/* Desktop Overlay Layer Container */
+/* Note: Positioned within workspace-container to not cover taskbar */
+.desktop-overlay-layer {
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    pointer-events: none; /* Allow clicks through when no overlays */
+    z-index: 9000; /* Above windows (100-9999) but below taskbar (10000) */
 }
-/* Windows Desktop Theme */
 
-.desktop--windows {
-    background: linear-gradient(135deg, #0078d4 0%, #106ebe 100%);
-    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+/* Individual Desktop Overlay */
+.desktop-overlay {
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    pointer-events: auto;
+    display: flex;
 }
 
-.desktop--windows .desktop__background {
-    background-image: 
-        radial-gradient(circle at 20% 80%, rgba(120, 119, 198, 0.3) 0%, transparent 50%),
-        radial-gradient(circle at 80% 20%, rgba(255, 255, 255, 0.15) 0%, transparent 50%),
-        radial-gradient(circle at 40% 40%, rgba(120, 119, 198, 0.15) 0%, transparent 50%);
+/* Backdrop */
+.desktop-overlay--backdrop {
+    background: rgba(0, 0, 0, 0.16);
 }
 
-/* Windows-style taskbar */
-.desktop--windows .window {
-    border: 1px solid #cccccc;
-    border-radius: 8px;
-    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
-    background: #ffffff;
+/* Backdrop with blur */
+.desktop-overlay--blur {
+    backdrop-filter: blur(1px);
 }
 
-.desktop--windows .window__header {
-    background: linear-gradient(180deg, #f0f0f0 0%, #e5e5e5 100%);
-    border-bottom: 1px solid #d0d0d0;
-    border-radius: 8px 8px 0 0;
-    height: 32px;
-    padding: 0 12px;
+/* Overlay content container */
+.desktop-overlay__content {
+    position: relative;
+    max-width: 100%;
+    max-height: 100%;
 }
 
-.desktop--windows .window__title {
-    font-size: 13px;
-    font-weight: 400;
-    color: #333333;
-}
+/* ============================================
+   POSITION VARIANTS
+   ============================================ */
 
-.desktop--windows .window__control {
-    width: 46px;
-    height: 32px;
-    border: none;
-    background: transparent;
-    font-size: 10px;
-    font-family: 'Segoe MDL2 Assets', 'Segoe UI Symbol', sans-serif;
-    color: #333333;
-    display: flex;
+.desktop-overlay--position-center {
     align-items: center;
     justify-content: center;
-    transition: background-color 0.1s ease;
-}
-
-.desktop--windows .window__control:hover {
-    background: rgba(0, 0, 0, 0.1);
 }
 
-.desktop--windows .window__control--minimize:hover {
-    background: #e5e5e5;
+.desktop-overlay--position-top {
+    align-items: flex-start;
+    justify-content: center;
 }
 
-.desktop--windows .window__control--maximize:hover {
-    background: #e5e5e5;
+.desktop-overlay--position-bottom {
+    align-items: flex-end;
+    justify-content: center;
 }
 
-.desktop--windows .window__control--close:hover {
-    background: #e81123;
-    color: white;
+.desktop-overlay--position-left {
+    align-items: center;
+    justify-content: flex-start;
 }
 
-.desktop--windows .window__control--minimize::before {
-    content: '🗕';
+.desktop-overlay--position-right {
+    align-items: center;
+    justify-content: flex-end;
 }
 
-.desktop--windows .window__control--maximize::before {
-    content: '🗖';
+.desktop-overlay--position-top-left {
+    align-items: flex-start;
+    justify-content: flex-start;
 }
 
-.desktop--windows .window__control--close::before {
-    content: '🗙';
+.desktop-overlay--position-top-right {
+    align-items: flex-start;
+    justify-content: flex-end;
 }
 
-/* Windows taskbar styling */
-.desktop--windows .desktop-taskbar {
-    background: rgba(0, 0, 0, 0.8);
-    backdrop-filter: blur(20px);
-    border-top: 1px solid rgba(255, 255, 255, 0.1);
+.desktop-overlay--position-bottom-left {
+    align-items: flex-end;
+    justify-content: flex-start;
 }
 
-.desktop--windows .taskbar-button {
-    background: rgba(255, 255, 255, 0.1);
-    border: 1px solid rgba(255, 255, 255, 0.2);
-    border-radius: 4px;
-    color: white;
-    font-family: 'Segoe UI', sans-serif;
-    font-size: 14px;
-    transition: all 0.2s ease;
+.desktop-overlay--position-bottom-right {
+    align-items: flex-end;
+    justify-content: flex-end;
 }
 
-.desktop--windows .taskbar-button:hover {
-    background: rgba(255, 255, 255, 0.2);
-    border-color: rgba(255, 255, 255, 0.3);
+.desktop-overlay--position-custom {
+    align-items: flex-start;
+    justify-content: flex-start;
 }
 
-.desktop--windows .taskbar-button--active {
-    background: rgba(255, 255, 255, 0.25);
-    border-color: rgba(255, 255, 255, 0.4);
-}
+/* ============================================
+   SIZE VARIANTS
+   ============================================ */
 
-/* Windows Start Button Styling */
-.desktop--windows .toggle-button {
-    /* Reset selector styles and apply Windows button styling */
-    position: relative;
-    padding: 8px 16px;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    gap: 8px;
-    overflow: hidden;
-    border: 1px solid rgba(255, 255, 255, 0.2);
-    outline: none;
-    transition: all 0.2s ease;
-    color: white;
-    background: linear-gradient(180deg, #0078d4 0%, #106ebe 100%);
-    min-height: 40px;
-    border-radius: 4px;
-    cursor: pointer;
-    font-family: 'Segoe UI', sans-serif;
-    font-weight: 500;
-    text-decoration: none;
-    white-space: nowrap;
-    list-style: none;
-    margin: 0;
-    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
+.desktop-overlay--size-auto .desktop-overlay__content {
+    width: auto;
+    height: auto;
 }
 
-.desktop--windows .toggle-button:hover:not(.toggle-button--disabled) {
-    background: linear-gradient(180deg, #106ebe 0%, #005a9e 100%);
-    border-color: rgba(255, 255, 255, 0.3);
-    transform: none;
+.desktop-overlay--size-full .desktop-overlay__content {
+    width: 100%;
+    height: 100%;
 }
 
-.desktop--windows .toggle-button.selected {
-    background: linear-gradient(180deg, #005a9e 0%, #004578 100%);
-    color: white;
-    border-color: rgba(255, 255, 255, 0.4);
-    box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.3);
+.desktop-overlay--size-large .desktop-overlay__content {
+    width: 80%;
+    height: 80%;
+    max-width: 1200px;
+    max-height: 800px;
 }
 
-.desktop--windows .toggle-button:focus {
-    outline: 2px solid rgba(255, 255, 255, 0.5);
-    outline-offset: 2px;
+.desktop-overlay--size-medium .desktop-overlay__content {
+    width: 60%;
+    height: 60%;
+    max-width: 800px;
+    max-height: 600px;
 }
 
-.desktop--windows .toggle-button--disabled {
-    background: rgba(200, 200, 200, 0.3) !important;
-    color: rgba(100, 100, 100, 0.5) !important;
-    border-color: rgba(255, 255, 255, 0.1) !important;
-    cursor: not-allowed;
-    opacity: 1;
-    box-shadow: none;
+.desktop-overlay--size-small .desktop-overlay__content {
+    width: 40%;
+    height: 40%;
+    max-width: 500px;
+    max-height: 400px;
 }
 
-/* Windows Application Menu */
-.desktop--windows .application-menu {
-    background: rgba(248, 248, 248, 0.95);
-    backdrop-filter: blur(20px);
-    border: 1px solid rgba(0, 0, 0, 0.1);
-    border-radius: 8px;
-    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
+.desktop-overlay--size-custom .desktop-overlay__content {
+    /* Custom size set via inline styles */
 }
 
-.desktop--windows .application-menu__header {
-    background: linear-gradient(180deg, #f8f8f8 0%, #e8e8e8 100%);
-    border-bottom: 1px solid #d0d0d0;
-}
+/* ============================================
+   ANIMATIONS - ENTER
+   ============================================ */
 
-.desktop--windows .application-menu__search-input {
-    border: 2px solid #e0e0e0;
-    border-radius: 4px;
-    font-family: 'Segoe UI', sans-serif;
+/* Fade */
+.desktop-overlay--enter-fade {
+    animation: desktopOverlayFadeIn var(--animation-duration, 300ms) ease-out;
 }
 
-.desktop--windows .application-menu__search-input:focus {
+@keyframes desktopOverlayFadeIn {
+    from {
+        opacity: 0;
+    }
+    to {
+        opacity: 1;
+    }
+}
+
+/* Slide Up */
+.desktop-overlay--enter-slide-up .desktop-overlay__content {
+    animation: desktopOverlaySlideUp var(--animation-duration, 300ms) ease-out;
+}
+
+@keyframes desktopOverlaySlideUp {
+    from {
+        transform: translateY(100%);
+        opacity: 0;
+    }
+    to {
+        transform: translateY(0);
+        opacity: 1;
+    }
+}
+
+/* Slide Down */
+.desktop-overlay--enter-slide-down .desktop-overlay__content {
+    animation: desktopOverlaySlideDown var(--animation-duration, 300ms) ease-out;
+}
+
+@keyframes desktopOverlaySlideDown {
+    from {
+        transform: translateY(-100%);
+        opacity: 0;
+    }
+    to {
+        transform: translateY(0);
+        opacity: 1;
+    }
+}
+
+/* Slide Left */
+.desktop-overlay--enter-slide-left .desktop-overlay__content {
+    animation: desktopOverlaySlideLeft var(--animation-duration, 300ms) ease-out;
+}
+
+@keyframes desktopOverlaySlideLeft {
+    from {
+        transform: translateX(100%);
+        opacity: 0;
+    }
+    to {
+        transform: translateX(0);
+        opacity: 1;
+    }
+}
+
+/* Slide Right */
+.desktop-overlay--enter-slide-right .desktop-overlay__content {
+    animation: desktopOverlaySlideRight var(--animation-duration, 300ms) ease-out;
+}
+
+@keyframes desktopOverlaySlideRight {
+    from {
+        transform: translateX(-100%);
+        opacity: 0;
+    }
+    to {
+        transform: translateX(0);
+        opacity: 1;
+    }
+}
+
+/* Scale */
+.desktop-overlay--enter-scale .desktop-overlay__content {
+    animation: desktopOverlayScaleIn var(--animation-duration, 300ms) ease-out;
+}
+
+@keyframes desktopOverlayScaleIn {
+    from {
+        transform: scale(0.8);
+        opacity: 0;
+    }
+    to {
+        transform: scale(1);
+        opacity: 1;
+    }
+}
+
+/* None */
+.desktop-overlay--enter-none {
+    /* No animation */
+}
+
+/* ============================================
+   ANIMATIONS - EXIT
+   ============================================ */
+
+/* Fade */
+.desktop-overlay--exit-fade {
+    animation: desktopOverlayFadeOut var(--animation-duration, 300ms) ease-in;
+}
+
+@keyframes desktopOverlayFadeOut {
+    from {
+        opacity: 1;
+    }
+    to {
+        opacity: 0;
+    }
+}
+
+/* Slide Up */
+.desktop-overlay--exit-slide-up .desktop-overlay__content {
+    animation: desktopOverlaySlideUpExit var(--animation-duration, 300ms) ease-in;
+}
+
+@keyframes desktopOverlaySlideUpExit {
+    from {
+        transform: translateY(0);
+        opacity: 1;
+    }
+    to {
+        transform: translateY(-100%);
+        opacity: 0;
+    }
+}
+
+/* Slide Down */
+.desktop-overlay--exit-slide-down .desktop-overlay__content {
+    animation: desktopOverlaySlideDownExit var(--animation-duration, 300ms) ease-in;
+}
+
+@keyframes desktopOverlaySlideDownExit {
+    from {
+        transform: translateY(0);
+        opacity: 1;
+    }
+    to {
+        transform: translateY(100%);
+        opacity: 0;
+    }
+}
+
+/* Slide Left */
+.desktop-overlay--exit-slide-left .desktop-overlay__content {
+    animation: desktopOverlaySlideLeftExit var(--animation-duration, 300ms) ease-in;
+}
+
+@keyframes desktopOverlaySlideLeftExit {
+    from {
+        transform: translateX(0);
+        opacity: 1;
+    }
+    to {
+        transform: translateX(-100%);
+        opacity: 0;
+    }
+}
+
+/* Slide Right */
+.desktop-overlay--exit-slide-right .desktop-overlay__content {
+    animation: desktopOverlaySlideRightExit var(--animation-duration, 300ms) ease-in;
+}
+
+@keyframes desktopOverlaySlideRightExit {
+    from {
+        transform: translateX(0);
+        opacity: 1;
+    }
+    to {
+        transform: translateX(100%);
+        opacity: 0;
+    }
+}
+
+/* Scale */
+.desktop-overlay--exit-scale .desktop-overlay__content {
+    animation: desktopOverlayScaleOut var(--animation-duration, 300ms) ease-in;
+}
+
+@keyframes desktopOverlayScaleOut {
+    from {
+        transform: scale(1);
+        opacity: 1;
+    }
+    to {
+        transform: scale(0.8);
+        opacity: 0;
+    }
+}
+
+/* None */
+.desktop-overlay--exit-none {
+    /* No animation */
+}
+
+/* ============================================
+   LAUNCHPAD SPECIFIC OVERLAY
+   ============================================ */
+
+.desktop-overlay--launchpad {
+    align-items: flex-end;
+    justify-content: flex-start;
+}
+
+.desktop-overlay__content--launchpad {
+    padding: 0 0 0 15px;
+}
+
+/* Responsive design */
+@media (max-width: 768px) {
+    .desktop {
+        font-size: 14px;
+    }
+
+    .desktop-overlay--size-large .desktop-overlay__content {
+        width: 90%;
+        height: 90%;
+    }
+
+    .desktop-overlay--size-medium .desktop-overlay__content {
+        width: 80%;
+        height: 80%;
+    }
+
+    .desktop-overlay--size-small .desktop-overlay__content {
+        width: 70%;
+        height: 70%;
+    }
+}
+
+@media (max-width: 480px) {
+    .desktop {
+        font-size: 12px;
+    }
+
+    .desktop-overlay--size-large .desktop-overlay__content,
+    .desktop-overlay--size-medium .desktop-overlay__content,
+    .desktop-overlay--size-small .desktop-overlay__content {
+        width: 95%;
+        height: 95%;
+    }
+}
+/* Windows 11 Desktop Theme */
+
+.desktop--windows {
+    background: linear-gradient(135deg, #0067C0 0%, #0078D4 50%, #00BCF2 100%);
+    font-family: 'Segoe UI Variable', 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+}
+
+.desktop--windows .desktop__background {
+    background-image:
+        radial-gradient(circle at 30% 70%, rgba(0, 120, 212, 0.4) 0%, transparent 60%),
+        radial-gradient(circle at 70% 30%, rgba(0, 188, 242, 0.3) 0%, transparent 60%),
+        radial-gradient(circle at 50% 50%, rgba(255, 255, 255, 0.1) 0%, transparent 70%);
+}
+
+/* Windows-style taskbar */
+.desktop--windows .window {
+    border: 1px solid #cccccc;
+    border-radius: 8px;
+    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
+    background: #ffffff;
+}
+
+.desktop--windows .window__header {
+    background: linear-gradient(180deg, #f0f0f0 0%, #e5e5e5 100%);
+    border-bottom: 1px solid #d0d0d0;
+    border-radius: 8px 8px 0 0;
+    height: 32px;
+    padding: 0 12px;
+}
+
+.desktop--windows .window__title {
+    font-size: 13px;
+    font-weight: 400;
+    color: #333333;
+}
+
+.desktop--windows .window__control {
+    width: 46px;
+    height: 32px;
+    border: none;
+    background: transparent;
+    font-size: 10px;
+    font-family: 'Segoe MDL2 Assets', 'Segoe UI Symbol', sans-serif;
+    color: #333333;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    transition: background-color 0.1s ease;
+}
+
+.desktop--windows .window__control:hover {
+    background: rgba(0, 0, 0, 0.1);
+}
+
+.desktop--windows .window__control--minimize:hover {
+    background: #e5e5e5;
+}
+
+.desktop--windows .window__control--maximize:hover {
+    background: #e5e5e5;
+}
+
+.desktop--windows .window__control--close:hover {
+    background: #e81123;
+    color: white;
+}
+
+.desktop--windows .window__control--minimize::before {
+    content: '🗕';
+}
+
+.desktop--windows .window__control--maximize::before {
+    content: '🗖';
+}
+
+.desktop--windows .window__control--close::before {
+    content: '🗙';
+}
+
+/* Windows taskbar styling */
+.desktop--windows .desktop-taskbar {
+    background: rgba(0, 0, 0, 0.8);
+    backdrop-filter: blur(20px);
+    border-top: 1px solid rgba(255, 255, 255, 0.1);
+}
+
+.desktop--windows .desktop-taskbar .icon {
+    color: rgba(255, 255, 255, 0.9);
+}
+
+.desktop--windows .desktop-taskbar .icon:hover {
+    color: #ffffff;
+    background-color: rgba(255, 255, 255, 0.15);
+}
+
+.desktop--windows .taskbar-button {
+    background: rgba(255, 255, 255, 0.1);
+    border: 1px solid rgba(255, 255, 255, 0.2);
+    border-radius: 4px;
+    color: white;
+    font-family: 'Segoe UI', sans-serif;
+    font-size: 14px;
+    transition: all 0.2s ease;
+}
+
+.desktop--windows .taskbar-button:hover {
+    background: rgba(255, 255, 255, 0.2);
+    border-color: rgba(255, 255, 255, 0.3);
+}
+
+.desktop--windows .taskbar-button--active {
+    background: rgba(255, 255, 255, 0.25);
+    border-color: rgba(255, 255, 255, 0.4);
+}
+
+/* Windows Start Button Styling */
+.desktop--windows .toggle-button {
+    /* Reset selector styles and apply Windows button styling */
+    position: relative;
+    padding: 8px 16px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    gap: 8px;
+    overflow: hidden;
+    border: 1px solid rgba(255, 255, 255, 0.2);
+    outline: none;
+    transition: all 0.2s ease;
+    color: white;
+    background: linear-gradient(180deg, #0078d4 0%, #106ebe 100%);
+    min-height: 40px;
+    border-radius: 4px;
+    cursor: pointer;
+    font-family: 'Segoe UI', sans-serif;
+    font-weight: 500;
+    text-decoration: none;
+    white-space: nowrap;
+    list-style: none;
+    margin: 0;
+    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
+}
+
+.desktop--windows .toggle-button:hover:not(.toggle-button--disabled) {
+    background: linear-gradient(180deg, #106ebe 0%, #005a9e 100%);
+    border-color: rgba(255, 255, 255, 0.3);
+    transform: none;
+}
+
+.desktop--windows .toggle-button.selected {
+    background: linear-gradient(180deg, #005a9e 0%, #004578 100%);
+    color: white;
+    border-color: rgba(255, 255, 255, 0.4);
+    box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.3);
+}
+
+.desktop--windows .toggle-button:focus {
+    outline: 2px solid rgba(255, 255, 255, 0.5);
+    outline-offset: 2px;
+}
+
+.desktop--windows .toggle-button--disabled {
+    background: rgba(200, 200, 200, 0.3) !important;
+    color: rgba(100, 100, 100, 0.5) !important;
+    border-color: rgba(255, 255, 255, 0.1) !important;
+    cursor: not-allowed;
+    opacity: 1;
+    box-shadow: none;
+}
+
+/* Windows LaunchPad */
+.desktop--windows .launchpad {
+    background: rgba(248, 248, 248, 0.95);
+    backdrop-filter: blur(20px);
+    border: 1px solid rgba(0, 0, 0, 0.1);
+    border-radius: 8px;
+    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
+}
+
+.desktop--windows .launchpad__header {
+    background: linear-gradient(180deg, #f8f8f8 0%, #e8e8e8 100%);
+    border-bottom: 1px solid #d0d0d0;
+}
+
+.desktop--windows .launchpad__search-input {
+    border: 2px solid #e0e0e0;
+    border-radius: 4px;
+    font-family: 'Segoe UI', sans-serif;
+}
+
+.desktop--windows .launchpad__search-input:focus {
     border-color: #0078d4;
     outline: none;
 }
 
-.desktop--windows .application-menu__category {
-    background: #ffffff;
-    font-family: 'Segoe UI', sans-serif;
+.desktop--windows .launchpad__sidebar {
+    background: #f8f8f8;
+    border-right: 1px solid #e0e0e0;
+}
+
+.desktop--windows .launchpad__categories {
+    background: #f8f8f8;
+}
+
+.desktop--windows .launchpad__category {
+    background: #ffffff;
+    font-family: 'Segoe UI', sans-serif;
+    font-size: 13px;
+}
+
+.desktop--windows .launchpad__category:hover {
+    background: #f5f5f5;
+}
+
+.desktop--windows .launchpad__category.active {
+    background: #0078d4;
+    border-color: #0078d4;
+    color: white;
+}
+
+.desktop--windows .launchpad__app {
+    background: #ffffff;
+    border: 1px solid transparent;
+    border-radius: 8px;
+    transition: all 0.15s ease;
+}
+
+.desktop--windows .launchpad__app:hover {
+    background: #f5f5f5;
+    border-color: #e0e0e0;
+    transform: translateY(-1px);
+    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+}
+
+.desktop--windows .app-name {
+    font-family: 'Segoe UI', sans-serif;
+    font-size: 13px;
+    font-weight: 400;
+    color: #333333;
+}
+
+/* Windows scrollbar */
+.desktop--windows .launchpad__content::-webkit-scrollbar {
+    width: 12px;
+}
+
+.desktop--windows .launchpad__content::-webkit-scrollbar-track {
+    background: #f1f1f1;
+    border-radius: 6px;
+}
+
+.desktop--windows .launchpad__content::-webkit-scrollbar-thumb {
+    background: #c1c1c1;
+    border-radius: 6px;
+    border: 2px solid #f1f1f1;
+}
+
+.desktop--windows .launchpad__content::-webkit-scrollbar-thumb:hover {
+    background: #a8a8a8;
+}
+/* macOS Desktop Theme */
+
+.desktop--macos {
+    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+    font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'Helvetica Neue', Arial, sans-serif;
+}
+
+.desktop--macos .desktop__background {
+    background-image: 
+        radial-gradient(circle at 25% 75%, rgba(102, 126, 234, 0.3) 0%, transparent 50%),
+        radial-gradient(circle at 75% 25%, rgba(118, 75, 162, 0.3) 0%, transparent 50%),
+        radial-gradient(circle at 50% 50%, rgba(255, 255, 255, 0.1) 0%, transparent 50%);
+}
+
+/* macOS-style windows */
+.desktop--macos .window {
+    border: 1px solid rgba(0, 0, 0, 0.1);
+    border-radius: 12px;
+    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
+    background: rgba(255, 255, 255, 0.95);
+    backdrop-filter: blur(20px);
+    overflow: hidden;
+}
+
+.desktop--macos .window__header {
+    background: linear-gradient(180deg, rgba(255, 255, 255, 0.8) 0%, rgba(245, 245, 245, 0.8) 100%);
+    backdrop-filter: blur(20px);
+    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
+    border-radius: 12px 12px 0 0;
+    height: 36px;
+    padding: 0 16px;
+}
+
+.desktop--macos .window__title {
+    font-size: 13px;
+    font-weight: 600;
+    color: #1d1d1f;
+    text-align: center;
+}
+
+.desktop--macos .window__controls {
+    order: -1;
+    margin-right: auto;
+}
+
+.desktop--macos .window__control {
+    width: 12px;
+    height: 12px;
+    border: none;
+    border-radius: 50%;
+    font-size: 8px;
+    color: rgba(0, 0, 0, 0.6);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    transition: all 0.2s ease;
+    margin-right: 8px;
+    position: relative;
+}
+
+.desktop--macos .window__control::before {
+    opacity: 0;
+    transition: opacity 0.2s ease;
+}
+
+.desktop--macos .window:hover .window__control::before {
+    opacity: 1;
+}
+
+.desktop--macos .window__control--close {
+    background: #ff5f57;
+    border: 0.5px solid #e0443e;
+}
+
+.desktop--macos .window__control--minimize {
+    background: #ffbd2e;
+    border: 0.5px solid #dea123;
+}
+
+.desktop--macos .window__control--maximize {
+    background: #28ca42;
+    border: 0.5px solid #1aad34;
+}
+
+.desktop--macos .window__control:hover {
+    transform: scale(1.1);
+}
+
+.desktop--macos .window__control--close::before {
+    content: '×';
+    font-weight: bold;
+    font-size: 10px;
+}
+
+.desktop--macos .window__control--minimize::before {
+    content: '−';
+    font-weight: bold;
+    font-size: 8px;
+}
+
+.desktop--macos .window__control--maximize::before {
+    content: '+';
+    font-weight: bold;
+    font-size: 8px;
+}
+
+/* macOS taskbar styling (Dock-inspired) */
+.desktop--macos .desktop-taskbar {
+    background: rgba(255, 255, 255, 0.8);
+    backdrop-filter: blur(20px);
+    border-top: 1px solid rgba(0, 0, 0, 0.1);
+    border-radius: 16px 16px 0 0;
+}
+
+.desktop--macos .desktop-taskbar .icon {
+    color: rgba(0, 0, 0, 0.7);
+}
+
+.desktop--macos .desktop-taskbar .icon:hover {
+    color: rgba(0, 0, 0, 0.9);
+    background-color: rgba(0, 0, 0, 0.08);
+}
+
+/* macOS taskbar menu styling */
+.desktop--macos .desktop-taskbar .menu-icon > menu {
+    background-color: rgba(255, 255, 255, 0.95);
+    backdrop-filter: blur(40px);
+    border-color: rgba(0, 0, 0, 0.15);
+    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25);
+}
+
+.desktop--macos .desktop-taskbar .menu-icon > menu .menu-item > label {
+    color: rgba(0, 0, 0, 0.9);
+}
+
+.desktop--macos .desktop-taskbar .menu-icon > menu .menu-item > .icon {
+    color: rgba(0, 0, 0, 0.7);
+}
+
+.desktop--macos .desktop-taskbar .menu-icon > menu .menu-item:hover {
+    background: rgba(0, 122, 255, 0.15);
+}
+
+.desktop--macos .desktop-taskbar .menu-icon > menu .menu-separator {
+    border-color: rgba(0, 0, 0, 0.1);
+}
+
+.desktop--macos .taskbar-button {
+    background: rgba(0, 0, 0, 0.05);
+    border: 1px solid rgba(0, 0, 0, 0.1);
+    border-radius: 12px;
+    color: #1d1d1f;
+    font-family: -apple-system, BlinkMacSystemFont, sans-serif;
+    font-size: 13px;
+    font-weight: 500;
+    transition: all 0.3s ease;
+    backdrop-filter: blur(10px);
+}
+
+.desktop--macos .taskbar-button:hover {
+    background: rgba(0, 0, 0, 0.1);
+    border-color: rgba(0, 0, 0, 0.2);
+    transform: translateY(-2px);
+    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
+}
+
+.desktop--macos .taskbar-button--active {
+    background: rgba(0, 122, 255, 0.15);
+    border-color: rgba(0, 122, 255, 0.3);
+    color: #007aff;
+}
+
+/* macOS Start Button Styling (Dock-inspired) */
+.desktop--macos .toggle-button {
+    /* Reset selector styles and apply macOS button styling */
+    position: relative;
+    padding: 8px 16px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    gap: 8px;
+    overflow: hidden;
+    border: 1px solid rgba(0, 0, 0, 0.1);
+    outline: none;
+    transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
+    color: #1d1d1f;
+    background: linear-gradient(180deg, rgba(255, 255, 255, 0.9) 0%, rgba(248, 248, 248, 0.9) 100%);
+    min-height: 40px;
+    border-radius: 12px;
+    cursor: pointer;
+    font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Display', sans-serif;
+    font-weight: 500;
+    text-decoration: none;
+    white-space: nowrap;
+    list-style: none;
+    margin: 0;
+    backdrop-filter: blur(20px);
+    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+}
+
+.desktop--macos .toggle-button:hover:not(.toggle-button--disabled) {
+    background: linear-gradient(180deg, rgba(255, 255, 255, 0.95) 0%, rgba(245, 245, 245, 0.95) 100%);
+    border-color: rgba(0, 0, 0, 0.15);
+    transform: translateY(-1px);
+    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
+}
+
+.desktop--macos .toggle-button.selected {
+    background: linear-gradient(180deg, rgba(0, 122, 255, 0.9) 0%, rgba(0, 100, 210, 0.9) 100%);
+    color: white;
+    border-color: rgba(0, 122, 255, 0.3);
+    box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.2), 0 2px 8px rgba(0, 122, 255, 0.3);
+}
+
+.desktop--macos .toggle-button:focus {
+    outline: 2px solid rgba(0, 122, 255, 0.5);
+    outline-offset: 2px;
+}
+
+.desktop--macos .toggle-button--disabled {
+    background: rgba(248, 248, 248, 0.5) !important;
+    color: rgba(60, 60, 67, 0.3) !important;
+    border-color: rgba(0, 0, 0, 0.05) !important;
+    cursor: not-allowed;
+    opacity: 1;
+    box-shadow: none;
+    backdrop-filter: none;
+}
+
+/* macOS LaunchPad */
+.desktop--macos .launchpad {
+    background: rgba(255, 255, 255, 0.9);
+    backdrop-filter: blur(40px);
+    border: 1px solid rgba(0, 0, 0, 0.1);
+    border-radius: 20px;
+    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
+}
+
+.desktop--macos .launchpad__header {
+    background: linear-gradient(180deg, rgba(255, 255, 255, 0.8) 0%, rgba(248, 248, 248, 0.8) 100%);
+    backdrop-filter: blur(20px);
+    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
+    border-radius: 20px 20px 0 0;
+}
+
+.desktop--macos .launchpad__header h2 {
+    color: #1d1d1f;
+    font-family: -apple-system, BlinkMacSystemFont, sans-serif;
+    font-weight: 600;
+    font-size: 20px;
+}
+
+.desktop--macos .launchpad__close {
+    color: #8e8e93;
+    background: rgba(0, 0, 0, 0.05);
+    border-radius: 8px;
+    font-size: 18px;
+}
+
+.desktop--macos .launchpad__close:hover {
+    background: rgba(255, 95, 87, 0.8);
+    color: white;
+}
+
+.desktop--macos .launchpad__search-input {
+    background: rgba(0, 0, 0, 0.05);
+    border: 2px solid rgba(0, 0, 0, 0.1);
+    border-radius: 12px;
+    color: #1d1d1f;
+    font-family: -apple-system, BlinkMacSystemFont, sans-serif;
+    font-size: 15px;
+}
+
+.desktop--macos .launchpad__search-input::placeholder {
+    color: #8e8e93;
+}
+
+.desktop--macos .launchpad__search-input:focus {
+    border-color: rgba(0, 122, 255, 0.8);
+    background: rgba(255, 255, 255, 0.8);
+    outline: none;
+    box-shadow: 0 0 0 4px rgba(0, 122, 255, 0.1);
+}
+
+.desktop--macos .launchpad__sidebar {
+    background: rgba(248, 248, 248, 0.8);
+    border-right: 1px solid rgba(0, 0, 0, 0.1);
+}
+
+.desktop--macos .launchpad__categories {
+    background: rgba(248, 248, 248, 0.8);
+}
+
+.desktop--macos .launchpad__category {
+    background: rgba(0, 0, 0, 0.05);
+    border: 1px solid rgba(0, 0, 0, 0.1);
+    border-radius: 20px;
+    color: #1d1d1f;
+    font-family: -apple-system, BlinkMacSystemFont, sans-serif;
+    font-size: 13px;
+    font-weight: 500;
+}
+
+.desktop--macos .launchpad__category:hover {
+    background: rgba(0, 0, 0, 0.1);
+    border-color: rgba(0, 0, 0, 0.2);
+}
+
+.desktop--macos .launchpad__category.active {
+    background: rgba(0, 122, 255, 0.8);
+    border-color: rgba(0, 122, 255, 1);
+    color: white;
+}
+
+.desktop--macos .launchpad__app {
+    background: rgba(255, 255, 255, 0.6);
+    border: 1px solid transparent;
+    border-radius: 16px;
+    transition: all 0.3s ease;
+    backdrop-filter: blur(10px);
+}
+
+.desktop--macos .launchpad__app:hover {
+    background: rgba(255, 255, 255, 0.8);
+    border-color: rgba(0, 0, 0, 0.1);
+    transform: translateY(-4px) scale(1.05);
+    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
+}
+
+.desktop--macos .app-name {
+    font-family: -apple-system, BlinkMacSystemFont, sans-serif;
+    font-size: 12px;
+    font-weight: 500;
+    color: #1d1d1f;
+}
+
+.desktop--macos .category-title {
+    color: #1d1d1f;
+    font-family: -apple-system, BlinkMacSystemFont, sans-serif;
+    font-weight: 600;
+}
+
+/* macOS scrollbar */
+.desktop--macos .launchpad__content::-webkit-scrollbar {
+    width: 6px;
+}
+
+.desktop--macos .launchpad__content::-webkit-scrollbar-track {
+    background: transparent;
+}
+
+.desktop--macos .launchpad__content::-webkit-scrollbar-thumb {
+    background: rgba(0, 0, 0, 0.2);
+    border-radius: 3px;
+}
+
+.desktop--macos .launchpad__content::-webkit-scrollbar-thumb:hover {
+    background: rgba(0, 0, 0, 0.4);
+}
+/* GNOME Desktop Theme (Ubuntu/Fedora inspired) */
+
+.desktop--gnome {
+    background: linear-gradient(135deg, #2c001e 0%, #4c2c92 50%, #0e4b99 100%);
+    font-family: 'Ubuntu', 'Cantarell', 'DejaVu Sans', sans-serif;
+}
+
+.desktop--gnome .desktop__background {
+    background-image:
+        radial-gradient(circle at 30% 70%, rgba(233, 84, 32, 0.2) 0%, transparent 50%),
+        radial-gradient(circle at 70% 30%, rgba(119, 41, 83, 0.3) 0%, transparent 50%),
+        radial-gradient(circle at 50% 50%, rgba(14, 75, 153, 0.2) 0%, transparent 50%);
+}
+
+/* GNOME-style windows */
+.desktop--gnome .window {
+    border: 1px solid #2d2d2d;
+    border-radius: 12px 12px 0 0;
+    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3);
+    background: #ffffff;
+    overflow: hidden;
+}
+
+.desktop--gnome .window__header {
+    background: linear-gradient(180deg, #f6f5f4 0%, #e6e5e4 100%);
+    border-bottom: 1px solid #d0cfce;
+    border-radius: 12px 12px 0 0;
+    height: 38px;
+    padding: 0 16px;
+}
+
+.desktop--gnome .window__title {
+    font-size: 14px;
+    font-weight: 500;
+    color: #2e3436;
+}
+
+.desktop--gnome .window__control {
+    width: 24px;
+    height: 24px;
+    border: none;
+    border-radius: 50%;
+    font-size: 12px;
+    color: #2e3436;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    transition: all 0.2s ease;
+    margin-left: 8px;
+}
+
+.desktop--gnome .window__control--minimize {
+    background: #f6d32d;
+    border: 1px solid #f5c211;
+}
+
+.desktop--gnome .window__control--maximize {
+    background: #33d17a;
+    border: 1px solid #2ec27e;
+}
+
+.desktop--gnome .window__control--close {
+    background: #e01b24;
+    border: 1px solid #c01c28;
+    color: white;
+}
+
+.desktop--gnome .window__control:hover {
+    transform: scale(1.1);
+    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
+}
+
+.desktop--gnome .window__control--minimize::before {
+    content: '−';
+    font-weight: bold;
+}
+
+.desktop--gnome .window__control--maximize::before {
+    content: '□';
+    font-weight: bold;
+}
+
+.desktop--gnome .window__control--close::before {
+    content: '×';
+    font-weight: bold;
+}
+
+/* GNOME taskbar styling (GNOME Activities) */
+.desktop--gnome .desktop-taskbar {
+    background: rgba(0, 0, 0, 0.85);
+    backdrop-filter: blur(10px);
+    border-top: 1px solid rgba(255, 255, 255, 0.1);
+}
+
+.desktop--gnome .desktop-taskbar .icon {
+    color: rgba(255, 255, 255, 0.9);
+}
+
+.desktop--gnome .desktop-taskbar .icon:hover {
+    color: #ffffff;
+    background-color: rgba(255, 255, 255, 0.12);
+}
+
+.desktop--gnome .taskbar-button {
+    background: rgba(255, 255, 255, 0.08);
+    border: 1px solid rgba(255, 255, 255, 0.15);
+    border-radius: 8px;
+    color: #ffffff;
+    font-family: 'Ubuntu', sans-serif;
+    font-size: 13px;
+    font-weight: 400;
+    transition: all 0.3s ease;
+}
+
+.desktop--gnome .taskbar-button:hover {
+    background: rgba(255, 255, 255, 0.15);
+    border-color: rgba(255, 255, 255, 0.25);
+    transform: translateY(-1px);
+}
+
+.desktop--gnome .taskbar-button--active {
+    background: rgba(53, 132, 228, 0.3);
+    border-color: rgba(53, 132, 228, 0.5);
+}
+
+/* Linux Start Button Styling (GNOME Activities) */
+.desktop--gnome .toggle-button {
+    /* Reset selector styles and apply Linux button styling */
+    position: relative;
+    padding: 8px 16px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    gap: 8px;
+    overflow: hidden;
+    border: 1px solid rgba(255, 255, 255, 0.15);
+    outline: none;
+    transition: all 0.3s ease;
+    color: #ffffff;
+    background: linear-gradient(180deg, rgba(53, 132, 228, 0.9) 0%, rgba(26, 95, 180, 0.9) 100%);
+    min-height: 40px;
+    border-radius: 8px;
+    cursor: pointer;
+    font-family: 'Ubuntu', 'Cantarell', sans-serif;
+    font-weight: 500;
+    text-decoration: none;
+    white-space: nowrap;
+    list-style: none;
+    margin: 0;
+    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
+}
+
+.desktop--gnome .toggle-button:hover:not(.toggle-button--disabled) {
+    background: linear-gradient(180deg, rgba(53, 132, 228, 1) 0%, rgba(26, 95, 180, 1) 100%);
+    border-color: rgba(255, 255, 255, 0.25);
+    transform: translateY(-1px);
+    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.25);
+}
+
+.desktop--gnome .toggle-button.selected {
+    background: linear-gradient(180deg, rgba(26, 95, 180, 0.9) 0%, rgba(15, 70, 140, 0.9) 100%);
+    color: #ffffff;
+    border-color: rgba(255, 255, 255, 0.3);
+    box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.3), 0 2px 4px rgba(53, 132, 228, 0.4);
+}
+
+.desktop--gnome .toggle-button:focus {
+    outline: 2px solid rgba(53, 132, 228, 0.6);
+    outline-offset: 2px;
+}
+
+.desktop--gnome .toggle-button--disabled {
+    background: rgba(255, 255, 255, 0.1) !important;
+    color: rgba(255, 255, 255, 0.4) !important;
+    border-color: rgba(255, 255, 255, 0.05) !important;
+    cursor: not-allowed;
+    opacity: 1;
+    box-shadow: none;
+}
+
+/* Linux LaunchPad (Activities Overview) */
+.desktop--gnome .launchpad {
+    background: rgba(36, 31, 49, 0.95);
+    backdrop-filter: blur(20px);
+    border: 1px solid rgba(255, 255, 255, 0.1);
+    border-radius: 12px;
+    box-shadow: 0 16px 48px rgba(0, 0, 0, 0.4);
+    color: #ffffff;
+}
+
+.desktop--gnome .launchpad__header {
+    background: linear-gradient(180deg, rgba(46, 52, 54, 0.8) 0%, rgba(36, 31, 49, 0.8) 100%);
+    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
+    color: #ffffff;
+}
+
+.desktop--gnome .launchpad__header h2 {
+    color: #ffffff;
+    font-family: 'Ubuntu', sans-serif;
+    font-weight: 500;
+}
+
+.desktop--gnome .launchpad__close {
+    color: #ffffff;
+    background: rgba(255, 255, 255, 0.1);
+    border-radius: 6px;
+}
+
+.desktop--gnome .launchpad__close:hover {
+    background: rgba(224, 27, 36, 0.8);
+}
+
+.desktop--gnome .launchpad__search-input {
+    background: rgba(255, 255, 255, 0.1);
+    border: 2px solid rgba(255, 255, 255, 0.2);
+    border-radius: 8px;
+    color: #ffffff;
+    font-family: 'Ubuntu', sans-serif;
+}
+
+.desktop--gnome .launchpad__search-input::placeholder {
+    color: rgba(255, 255, 255, 0.6);
+}
+
+.desktop--gnome .launchpad__search-input:focus {
+    border-color: rgba(53, 132, 228, 0.8);
+    background: rgba(255, 255, 255, 0.15);
+    outline: none;
+}
+
+.desktop--gnome .launchpad__sidebar {
+    background: rgba(46, 52, 54, 0.8);
+    border-right: 1px solid rgba(255, 255, 255, 0.1);
+}
+
+.desktop--gnome .launchpad__categories {
+    background: rgba(46, 52, 54, 0.8);
+}
+
+.desktop--gnome .launchpad__category {
+    background: rgba(255, 255, 255, 0.1);
+    border: 1px solid rgba(255, 255, 255, 0.2);
+    border-radius: 20px;
+    color: #ffffff;
+    font-family: 'Ubuntu', sans-serif;
+    font-size: 13px;
+    font-weight: 400;
+}
+
+.desktop--gnome .launchpad__category:hover {
+    background: rgba(255, 255, 255, 0.2);
+    border-color: rgba(255, 255, 255, 0.3);
+}
+
+.desktop--gnome .launchpad__category.active {
+    background: rgba(53, 132, 228, 0.8);
+    border-color: rgba(53, 132, 228, 1);
+    color: #ffffff;
+}
+
+.desktop--gnome .launchpad__app {
+    background: rgba(255, 255, 255, 0.05);
+    border: 1px solid transparent;
+    border-radius: 12px;
+    transition: all 0.2s ease;
+}
+
+.desktop--gnome .launchpad__app:hover {
+    background: rgba(255, 255, 255, 0.15);
+    border-color: rgba(255, 255, 255, 0.2);
+    transform: translateY(-2px);
+    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3);
+}
+
+.desktop--gnome .app-name {
+    font-family: 'Ubuntu', sans-serif;
+    font-size: 13px;
+    font-weight: 400;
+    color: #ffffff;
+}
+
+.desktop--gnome .category-title {
+    color: #ffffff;
+    font-family: 'Ubuntu', sans-serif;
+    font-weight: 500;
+}
+
+/* Linux scrollbar */
+.desktop--gnome .launchpad__content::-webkit-scrollbar {
+    width: 8px;
+}
+
+.desktop--gnome .launchpad__content::-webkit-scrollbar-track {
+    background: rgba(255, 255, 255, 0.1);
+    border-radius: 4px;
+}
+
+.desktop--gnome .launchpad__content::-webkit-scrollbar-thumb {
+    background: rgba(255, 255, 255, 0.3);
+    border-radius: 4px;
+}
+
+.desktop--gnome .launchpad__content::-webkit-scrollbar-thumb:hover {
+    background: rgba(255, 255, 255, 0.5);
+}
+/* Windows XP Desktop Theme - Luna Blue */
+
+.desktop--windowsxp {
+    background: linear-gradient(180deg, #245EDC 0%, #3F8CF3 50%, #5BB0FF 100%);
+    font-family: 'Tahoma', 'MS Sans Serif', sans-serif;
+}
+
+.desktop--windowsxp .desktop__background {
+    background-image: 
+        radial-gradient(circle at 60% 40%, rgba(255, 255, 255, 0.15) 0%, transparent 40%),
+        radial-gradient(circle at 30% 70%, rgba(91, 176, 255, 0.2) 0%, transparent 50%);
+}
+
+/* Windows XP-style windows */
+.desktop--windowsxp .window {
+    border: 3px solid;
+    border-color: #0054E3 #0054E3 #003C9E #003C9E;
+    border-radius: 8px 8px 0 0;
+    box-shadow: 2px 2px 8px rgba(0, 0, 0, 0.4);
+    background: #ECE9D8;
+}
+
+.desktop--windowsxp .window__header {
+    background: linear-gradient(180deg, #0997FF 0%, #0053EE 50%, #0050EE 50%, #003DD7 100%);
+    border-bottom: none;
+    border-radius: 6px 6px 0 0;
+    height: 30px;
+    padding: 0 8px;
+}
+
+.desktop--windowsxp .window__title {
+    font-size: 11px;
+    font-weight: bold;
+    color: #FFFFFF;
+    text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.5);
+}
+
+.desktop--windowsxp .window__control {
+    width: 21px;
+    height: 21px;
+    border: 1px solid;
+    border-radius: 3px;
+    font-size: 9px;
+    font-weight: bold;
+    color: #000000;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    transition: none;
+    margin-left: 2px;
+}
+
+.desktop--windowsxp .window__control--minimize {
+    background: linear-gradient(180deg, #EBF4FD 0%, #C1D2EE 100%);
+    border-color: #003C74 #DDEEFF #DDEEFF #003C74;
+}
+
+.desktop--windowsxp .window__control--maximize {
+    background: linear-gradient(180deg, #EBF4FD 0%, #C1D2EE 100%);
+    border-color: #003C74 #DDEEFF #DDEEFF #003C74;
+}
+
+.desktop--windowsxp .window__control--close {
+    background: linear-gradient(180deg, #FD9D6C 0%, #E4735A 100%);
+    border-color: #8B2D1A #FFD7C7 #FFD7C7 #8B2D1A;
+    color: #FFFFFF;
+}
+
+.desktop--windowsxp .window__control:hover {
+    filter: brightness(1.1);
+}
+
+.desktop--windowsxp .window__control:active {
+    filter: brightness(0.9);
+}
+
+.desktop--windowsxp .window__control--minimize::before {
+    content: '_';
+    margin-top: -4px;
+}
+
+.desktop--windowsxp .window__control--maximize::before {
+    content: '□';
+    font-size: 11px;
+}
+
+.desktop--windowsxp .window__control--close::before {
+    content: '×';
+    font-size: 14px;
+}
+
+/* Windows XP taskbar styling */
+.desktop--windowsxp .desktop-taskbar {
+    background: linear-gradient(180deg, #3F8CF3 0%, #2373E7 50%, #1A5FD7 100%);
+    border-top: 2px solid #5BB0FF;
+    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.3);
+}
+
+.desktop--windowsxp .desktop-taskbar .icon {
+    color: rgba(255, 255, 255, 0.95);
+    text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.3);
+}
+
+.desktop--windowsxp .desktop-taskbar .icon:hover {
+    color: #ffffff;
+    background-color: rgba(255, 255, 255, 0.15);
+    border-radius: 3px;
+}
+
+/* Windows XP taskbar menu styling */
+.desktop--windowsxp .desktop-taskbar .menu-icon > menu {
+    background-color: #ECE9D8;
+    border: 2px solid;
+    border-color: #0054E3 #003C9E #003C9E #0054E3;
+    box-shadow: 4px 4px 8px rgba(0, 0, 0, 0.4);
+}
+
+.desktop--windowsxp .desktop-taskbar .menu-icon > menu .menu-item > label {
+    color: #000000;
+}
+
+.desktop--windowsxp .desktop-taskbar .menu-icon > menu .menu-item > .icon {
+    color: #000000;
+}
+
+.desktop--windowsxp .desktop-taskbar .menu-icon > menu .menu-item:hover {
+    background: #EBF4FD;
+}
+
+.desktop--windowsxp .desktop-taskbar .menu-icon > menu .menu-separator {
+    border-color: #ACA899;
+}
+
+.desktop--windowsxp .taskbar-button {
+    background: linear-gradient(180deg, #3F8CF3 0%, #2373E7 100%);
+    border: 1px solid #1A5FD7;
+    border-radius: 3px;
+    color: #FFFFFF;
+    font-family: 'Tahoma', sans-serif;
+    font-size: 11px;
+    font-weight: bold;
+    text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.3);
+    transition: none;
+}
+
+.desktop--windowsxp .taskbar-button:hover {
+    background: linear-gradient(180deg, #5BB0FF 0%, #3F8CF3 100%);
+    border-color: #0054E3;
+}
+
+.desktop--windowsxp .taskbar-button--active {
+    background: linear-gradient(180deg, #1A5FD7 0%, #0054E3 100%);
+    border-color: #003C9E;
+    box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.3);
+}
+
+/* Windows XP Start Button */
+.desktop--windowsxp .toggle-button {
+    position: relative;
+    padding: 4px 12px 4px 8px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    gap: 6px;
+    border: 1px solid;
+    border-color: #16A085 #0E7C68 #0E7C68 #16A085;
+    outline: none;
+    color: #FFFFFF;
+    background: linear-gradient(180deg, #3EBD3E 0%, #2D9B2D 50%, #1F7C1F 100%);
+    min-height: 32px;
+    border-radius: 0 12px 12px 0;
+    cursor: pointer;
+    font-family: 'Tahoma', sans-serif;
+    font-weight: bold;
+    font-size: 11px;
+    text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.5);
+    box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
+}
+
+.desktop--windowsxp .toggle-button:hover:not(.toggle-button--disabled) {
+    background: linear-gradient(180deg, #4ECD4E 0%, #3DAB3D 50%, #2F8C2F 100%);
+    border-color: #1FB01F #0F8C0F #0F8C0F #1FB01F;
+}
+
+.desktop--windowsxp .toggle-button.selected {
+    background: linear-gradient(180deg, #1F7C1F 0%, #2D9B2D 50%, #3EBD3E 100%);
+    box-shadow: inset 1px 1px 3px rgba(0, 0, 0, 0.4);
+}
+
+.desktop--windowsxp .toggle-button:focus {
+    outline: 1px dotted #FFFFFF;
+    outline-offset: -3px;
+}
+
+/* Windows XP LaunchPad (Start Menu) */
+.desktop--windowsxp .launchpad {
+    background: linear-gradient(to right, 
+        #3F8CF3 0%, #3F8CF3 50px,
+        #FFFFFF 50px, #FFFFFF 100%);
+    border: 3px solid;
+    border-color: #0054E3 #003C9E #003C9E #0054E3;
+    border-radius: 8px;
+    box-shadow: 4px 4px 12px rgba(0, 0, 0, 0.5);
+}
+
+.desktop--windowsxp .launchpad__header {
+    background: linear-gradient(180deg, #0997FF 0%, #0053EE 100%);
+    border-bottom: 2px solid #003C9E;
+    color: #FFFFFF;
+}
+
+.desktop--windowsxp .launchpad__header h2 {
+    color: #FFFFFF;
+    font-family: 'Tahoma', sans-serif;
+    font-weight: bold;
+    font-size: 14px;
+    text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.5);
+}
+
+.desktop--windowsxp .launchpad__search-input {
+    background: #FFFFFF;
+    border: 2px inset #7F9DB9;
+    border-radius: 0;
+    font-family: 'Tahoma', sans-serif;
+    font-size: 11px;
+}
+
+.desktop--windowsxp .launchpad__sidebar {
+    background: #ECE9D8;
+    border-right: 2px solid #ACA899;
+}
+
+.desktop--windowsxp .launchpad__categories {
+    background: #ECE9D8;
+}
+
+.desktop--windowsxp .launchpad__category {
+    background: #FFFFFF;
+    border: 1px solid #ACA899;
+    border-radius: 0;
+    color: #000000;
+    font-family: 'Tahoma', sans-serif;
+    font-size: 11px;
+    font-weight: normal;
+}
+
+.desktop--windowsxp .launchpad__category:hover {
+    background: #EBF4FD;
+    border-color: #0054E3;
+}
+
+.desktop--windowsxp .launchpad__category.active {
+    background: #0054E3;
+    border-color: #003C9E;
+    color: #FFFFFF;
+}
+
+.desktop--windowsxp .launchpad__app {
+    background: #FFFFFF;
+    border: 1px solid transparent;
+    border-radius: 4px;
+    transition: none;
+}
+
+.desktop--windowsxp .launchpad__app:hover {
+    background: #EBF4FD;
+    border-color: #0054E3;
+}
+
+.desktop--windowsxp .app-name {
+    font-family: 'Tahoma', sans-serif;
+    font-size: 11px;
+    font-weight: normal;
+    color: #000000;
+}
+
+/* Windows XP scrollbar */
+.desktop--windowsxp .launchpad__content::-webkit-scrollbar {
+    width: 16px;
+}
+
+.desktop--windowsxp .launchpad__content::-webkit-scrollbar-track {
+    background: #ECE9D8;
+}
+
+.desktop--windowsxp .launchpad__content::-webkit-scrollbar-thumb {
+    background: linear-gradient(90deg, #EBF4FD 0%, #C1D2EE 100%);
+    border: 1px solid #003C74;
+}
+
+.desktop--windowsxp .launchpad__content::-webkit-scrollbar-thumb:hover {
+    background: linear-gradient(90deg, #D6E8FF 0%, #B0C4DE 100%);
+}
+
+/* Windows 98 Desktop Theme */
+
+.desktop--windows98 {
+    background: #008080; /* Teal */
+    font-family: 'MS Sans Serif', 'Microsoft Sans Serif', sans-serif;
+}
+
+.desktop--windows98 .desktop__background {
+    background: #008080;
+}
+
+/* Windows 98-style windows */
+.desktop--windows98 .window {
+    border: 2px outset #DFDFDF;
+    border-radius: 0;
+    box-shadow: 2px 2px 0 rgba(0, 0, 0, 0.5);
+    background: #C0C0C0;
+}
+
+.desktop--windows98 .window__header {
+    background: linear-gradient(90deg, #000080 0%, #1084D0 100%);
+    border-bottom: none;
+    border-radius: 0;
+    height: 24px;
+    padding: 0 4px;
+}
+
+.desktop--windows98 .window__title {
+    font-size: 11px;
+    font-weight: bold;
+    color: #FFFFFF;
+}
+
+.desktop--windows98 .window__control {
+    width: 16px;
+    height: 14px;
+    border: 1px outset #DFDFDF;
+    border-radius: 0;
+    font-size: 8px;
+    font-weight: bold;
+    color: #000000;
+    background: #C0C0C0;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    transition: none;
+    margin-left: 2px;
+}
+
+.desktop--windows98 .window__control:active {
+    border-style: inset;
+}
+
+.desktop--windows98 .window__control--minimize::before {
+    content: '_';
+    margin-top: -6px;
+}
+
+.desktop--windows98 .window__control--maximize::before {
+    content: '□';
+    font-size: 10px;
+}
+
+.desktop--windows98 .window__control--close::before {
+    content: '×';
+    font-size: 12px;
+}
+
+/* Windows 98 taskbar styling */
+.desktop--windows98 .desktop-taskbar {
+    background: #C0C0C0;
+    border-top: 2px solid #FFFFFF;
+    box-shadow: inset 0 1px 0 #DFDFDF;
+}
+
+.desktop--windows98 .desktop-taskbar .icon {
+    color: #000000;
+}
+
+.desktop--windows98 .desktop-taskbar .icon:hover {
+    color: #000000;
+    background-color: rgba(0, 0, 0, 0.1);
+}
+
+/* Windows 98 taskbar menu styling */
+.desktop--windows98 .desktop-taskbar .menu-icon > menu {
+    background-color: #C0C0C0;
+    border: 2px outset #DFDFDF;
+    box-shadow: 2px 2px 0 rgba(0, 0, 0, 0.5);
+}
+
+.desktop--windows98 .desktop-taskbar .menu-icon > menu .menu-item > label {
+    color: #000000;
+}
+
+.desktop--windows98 .desktop-taskbar .menu-icon > menu .menu-item > .icon {
+    color: #000000;
+}
+
+.desktop--windows98 .desktop-taskbar .menu-icon > menu .menu-item:hover {
+    background: #000080;
+    color: #FFFFFF;
+}
+
+.desktop--windows98 .desktop-taskbar .menu-icon > menu .menu-item:hover > label,
+.desktop--windows98 .desktop-taskbar .menu-icon > menu .menu-item:hover > .icon {
+    color: #FFFFFF;
+}
+
+.desktop--windows98 .desktop-taskbar .menu-icon > menu .menu-separator {
+    border-color: #808080;
+}
+
+.desktop--windows98 .taskbar-button {
+    background: #C0C0C0;
+    border: 2px outset #DFDFDF;
+    border-radius: 0;
+    color: #000000;
+    font-family: 'MS Sans Serif', sans-serif;
+    font-size: 11px;
+    font-weight: normal;
+    transition: none;
+    text-align: left;
+}
+
+.desktop--windows98 .taskbar-button:hover {
+    background: #C0C0C0;
+}
+
+.desktop--windows98 .taskbar-button:active,
+.desktop--windows98 .taskbar-button--active {
+    border-style: inset;
+    padding-left: 2px;
+    padding-top: 2px;
+}
+
+/* Windows 98 Start Button */
+.desktop--windows98 .toggle-button {
+    position: relative;
+    padding: 2px 6px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    gap: 4px;
+    border: 2px outset #DFDFDF;
+    outline: none;
+    color: #000000;
+    background: #C0C0C0;
+    min-height: 28px;
+    border-radius: 0;
+    cursor: pointer;
+    font-family: 'MS Sans Serif', sans-serif;
+    font-weight: bold;
+    font-size: 11px;
+    box-shadow: none;
+}
+
+.desktop--windows98 .toggle-button:hover:not(.toggle-button--disabled) {
+    background: #C0C0C0;
+}
+
+.desktop--windows98 .toggle-button:active,
+.desktop--windows98 .toggle-button.selected {
+    border-style: inset;
+    padding-left: 8px;
+    padding-top: 4px;
+}
+
+.desktop--windows98 .toggle-button:focus {
+    outline: 1px dotted #000000;
+    outline-offset: -4px;
+}
+
+/* Windows 98 LaunchPad (Start Menu) */
+.desktop--windows98 .launchpad {
+    background: #C0C0C0;
+    border: 2px outset #DFDFDF;
+    border-radius: 0;
+    box-shadow: 2px 2px 0 rgba(0, 0, 0, 0.5);
+}
+
+.desktop--windows98 .launchpad__header {
+    background: linear-gradient(90deg, #000080 0%, #1084D0 100%);
+    border-bottom: 2px solid #FFFFFF;
+    color: #FFFFFF;
+}
+
+.desktop--windows98 .launchpad__header h2 {
+    color: #FFFFFF;
+    font-family: 'MS Sans Serif', sans-serif;
+    font-weight: bold;
     font-size: 13px;
 }
 
-.desktop--windows .application-menu__category:hover {
-    background: #f5f5f5;
+.desktop--windows98 .launchpad__search-input {
+    background: #FFFFFF;
+    border: 2px inset #808080;
+    border-radius: 0;
+    font-family: 'MS Sans Serif', sans-serif;
+    font-size: 11px;
 }
 
-.desktop--windows .application-menu__category.active {
-    background: #0078d4;
-    border-color: #0078d4;
-    color: white;
+.desktop--windows98 .launchpad__sidebar {
+    background: #C0C0C0;
+    border-right: 2px solid #808080;
 }
 
-.desktop--windows .application-menu__app {
-    background: #ffffff;
+.desktop--windows98 .launchpad__categories {
+    background: #C0C0C0;
+}
+
+.desktop--windows98 .launchpad__category {
+    background: #C0C0C0;
+    border: 2px outset #DFDFDF;
+    border-radius: 0;
+    color: #000000;
+    font-family: 'MS Sans Serif', sans-serif;
+    font-size: 11px;
+    font-weight: normal;
+}
+
+.desktop--windows98 .launchpad__category:hover {
+    background: #C0C0C0;
+}
+
+.desktop--windows98 .launchpad__category:active,
+.desktop--windows98 .launchpad__category.active {
+    border-style: inset;
+    background: #000080;
+    color: #FFFFFF;
+}
+
+.desktop--windows98 .launchpad__app {
+    background: #C0C0C0;
     border: 1px solid transparent;
-    border-radius: 8px;
-    transition: all 0.15s ease;
+    border-radius: 0;
+    transition: none;
 }
 
-.desktop--windows .application-menu__app:hover {
-    background: #f5f5f5;
-    border-color: #e0e0e0;
-    transform: translateY(-1px);
-    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+.desktop--windows98 .launchpad__app:hover {
+    background: #000080;
+    color: #FFFFFF;
+}
+
+.desktop--windows98 .launchpad__app:hover .app-name {
+    color: #FFFFFF;
+}
+
+.desktop--windows98 .app-name {
+    font-family: 'MS Sans Serif', sans-serif;
+    font-size: 11px;
+    font-weight: normal;
+    color: #000000;
+}
+
+/* Windows 98 scrollbar */
+.desktop--windows98 .launchpad__content::-webkit-scrollbar {
+    width: 16px;
+}
+
+.desktop--windows98 .launchpad__content::-webkit-scrollbar-track {
+    background: #C0C0C0;
+    border: 1px solid #808080;
+}
+
+.desktop--windows98 .launchpad__content::-webkit-scrollbar-thumb {
+    background: #C0C0C0;
+    border: 2px outset #DFDFDF;
+}
+
+.desktop--windows98 .launchpad__content::-webkit-scrollbar-thumb:active {
+    border-style: inset;
+}
+
+.desktop--windows98 .launchpad__content::-webkit-scrollbar-button {
+    background: #C0C0C0;
+    border: 2px outset #DFDFDF;
+    height: 16px;
+}
+
+.desktop--windows98 .launchpad__content::-webkit-scrollbar-button:active {
+    border-style: inset;
+}
+
+/* NeXTSTEP Desktop Theme */
+
+.desktop--nextstep {
+    background: #2B2B2B;
+    font-family: 'Helvetica Neue', 'Helvetica', Arial, sans-serif;
+}
+
+.desktop--nextstep .desktop__background {
+    background: #2B2B2B;
+}
+
+/* NeXTSTEP-style windows */
+.desktop--nextstep .window {
+    border: 1px solid #000000;
+    border-radius: 0;
+    box-shadow: 4px 4px 0 rgba(0, 0, 0, 0.5);
+    background: #C0C0C0;
+}
+
+.desktop--nextstep .window__header {
+    background: #7F7F7F;
+    border-bottom: 1px solid #000000;
+    border-radius: 0;
+    height: 28px;
+    padding: 0 8px;
+}
+
+.desktop--nextstep .window__title {
+    font-size: 12px;
+    font-weight: bold;
+    color: #FFFFFF;
+    text-align: center;
+}
+
+.desktop--nextstep .window__controls {
+    order: -1;
+    margin-right: auto;
+}
+
+.desktop--nextstep .window__control {
+    width: 20px;
+    height: 20px;
+    border: 1px solid #000000;
+    border-radius: 0;
+    font-size: 10px;
+    font-weight: bold;
+    color: #000000;
+    background: #C0C0C0;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    transition: none;
+    margin-right: 4px;
+    box-shadow: 1px 1px 0 #FFFFFF inset, -1px -1px 0 #808080 inset;
+}
+
+.desktop--nextstep .window__control:active {
+    box-shadow: -1px -1px 0 #FFFFFF inset, 1px 1px 0 #808080 inset;
+}
+
+.desktop--nextstep .window__control--close {
+    background: #C0C0C0;
+}
+
+.desktop--nextstep .window__control--minimize {
+    background: #C0C0C0;
+}
+
+.desktop--nextstep .window__control--maximize {
+    background: #C0C0C0;
+}
+
+.desktop--nextstep .window__control--close::before {
+    content: '×';
+    font-size: 14px;
+}
+
+.desktop--nextstep .window__control--minimize::before {
+    content: '_';
+    margin-top: -4px;
+}
+
+.desktop--nextstep .window__control--maximize::before {
+    content: '□';
+    font-size: 12px;
+}
+
+/* NeXTSTEP taskbar styling (Dock) */
+.desktop--nextstep .desktop-taskbar {
+    background: #7F7F7F;
+    border-top: 1px solid #000000;
+    box-shadow: 0 -2px 4px rgba(0, 0, 0, 0.5);
+}
+
+.desktop--nextstep .desktop-taskbar .icon {
+    color: #FFFFFF;
+}
+
+.desktop--nextstep .desktop-taskbar .icon:hover {
+    color: #FFFFFF;
+    background-color: rgba(0, 0, 0, 0.3);
+}
+
+/* NeXTSTEP taskbar menu styling */
+.desktop--nextstep .desktop-taskbar .menu-icon > menu {
+    background-color: #C0C0C0;
+    border: 1px solid #000000;
+    box-shadow: 4px 4px 0 rgba(0, 0, 0, 0.5);
+}
+
+.desktop--nextstep .desktop-taskbar .menu-icon > menu .menu-item > label {
+    color: #000000;
+}
+
+.desktop--nextstep .desktop-taskbar .menu-icon > menu .menu-item > .icon {
+    color: #000000;
+}
+
+.desktop--nextstep .desktop-taskbar .menu-icon > menu .menu-item:hover {
+    background: #000000;
+    color: #FFFFFF;
+}
+
+.desktop--nextstep .desktop-taskbar .menu-icon > menu .menu-item:hover > label,
+.desktop--nextstep .desktop-taskbar .menu-icon > menu .menu-item:hover > .icon {
+    color: #FFFFFF;
+}
+
+.desktop--nextstep .desktop-taskbar .menu-icon > menu .menu-separator {
+    border-color: #000000;
+}
+
+.desktop--nextstep .taskbar-button {
+    background: #C0C0C0;
+    border: 1px solid #000000;
+    border-radius: 0;
+    color: #000000;
+    font-family: 'Helvetica Neue', sans-serif;
+    font-size: 11px;
+    font-weight: bold;
+    transition: none;
+    box-shadow: 1px 1px 0 #FFFFFF inset, -1px -1px 0 #808080 inset;
+}
+
+.desktop--nextstep .taskbar-button:hover {
+    background: #D0D0D0;
+}
+
+.desktop--nextstep .taskbar-button:active,
+.desktop--nextstep .taskbar-button--active {
+    box-shadow: -1px -1px 0 #FFFFFF inset, 1px 1px 0 #808080 inset;
+}
+
+/* NeXTSTEP Start Button */
+.desktop--nextstep .toggle-button {
+    position: relative;
+    padding: 4px 12px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    gap: 6px;
+    border: 1px solid #000000;
+    outline: none;
+    color: #000000;
+    background: #C0C0C0;
+    min-height: 32px;
+    border-radius: 0;
+    cursor: pointer;
+    font-family: 'Helvetica Neue', sans-serif;
+    font-weight: bold;
+    font-size: 12px;
+    box-shadow: 2px 2px 0 #FFFFFF inset, -2px -2px 0 #808080 inset;
+}
+
+.desktop--nextstep .toggle-button:hover:not(.toggle-button--disabled) {
+    background: #D0D0D0;
+}
+
+.desktop--nextstep .toggle-button:active,
+.desktop--nextstep .toggle-button.selected {
+    box-shadow: -2px -2px 0 #FFFFFF inset, 2px 2px 0 #808080 inset;
+}
+
+.desktop--nextstep .toggle-button:focus {
+    outline: 1px dotted #000000;
+    outline-offset: -4px;
+}
+
+/* NeXTSTEP LaunchPad (Menu) */
+.desktop--nextstep .launchpad {
+    background: #C0C0C0;
+    border: 1px solid #000000;
+    border-radius: 0;
+    box-shadow: 4px 4px 0 rgba(0, 0, 0, 0.5);
+}
+
+.desktop--nextstep .launchpad__header {
+    background: #7F7F7F;
+    border-bottom: 1px solid #000000;
+    color: #FFFFFF;
+}
+
+.desktop--nextstep .launchpad__header h2 {
+    color: #FFFFFF;
+    font-family: 'Helvetica Neue', sans-serif;
+    font-weight: bold;
+    font-size: 14px;
+}
+
+.desktop--nextstep .launchpad__close {
+    color: #000000;
+    background: #C0C0C0;
+    border: 1px solid #000000;
+    border-radius: 0;
+    box-shadow: 1px 1px 0 #FFFFFF inset, -1px -1px 0 #808080 inset;
+}
+
+.desktop--nextstep .launchpad__close:active {
+    box-shadow: -1px -1px 0 #FFFFFF inset, 1px 1px 0 #808080 inset;
+}
+
+.desktop--nextstep .launchpad__search-input {
+    background: #FFFFFF;
+    border: 2px solid #000000;
+    border-radius: 0;
+    font-family: 'Helvetica Neue', sans-serif;
+    font-size: 12px;
+    box-shadow: -1px -1px 0 #808080 inset, 1px 1px 0 #FFFFFF inset;
+}
+
+.desktop--nextstep .launchpad__sidebar {
+    background: #7F7F7F;
+    border-right: 1px solid #000000;
+}
+
+.desktop--nextstep .launchpad__categories {
+    background: #7F7F7F;
+}
+
+.desktop--nextstep .launchpad__category {
+    background: #C0C0C0;
+    border: 1px solid #000000;
+    border-radius: 0;
+    color: #000000;
+    font-family: 'Helvetica Neue', sans-serif;
+    font-size: 11px;
+    font-weight: bold;
+    box-shadow: 1px 1px 0 #FFFFFF inset, -1px -1px 0 #808080 inset;
+}
+
+.desktop--nextstep .launchpad__category:hover {
+    background: #D0D0D0;
+}
+
+.desktop--nextstep .launchpad__category:active,
+.desktop--nextstep .launchpad__category.active {
+    background: #000000;
+    color: #FFFFFF;
+    box-shadow: -1px -1px 0 #FFFFFF inset, 1px 1px 0 #808080 inset;
+}
+
+.desktop--nextstep .launchpad__app {
+    background: #C0C0C0;
+    border: 1px solid transparent;
+    border-radius: 0;
+    transition: none;
+}
+
+.desktop--nextstep .launchpad__app:hover {
+    background: #000000;
+    color: #FFFFFF;
+}
+
+.desktop--nextstep .launchpad__app:hover .app-name {
+    color: #FFFFFF;
+}
+
+.desktop--nextstep .app-name {
+    font-family: 'Helvetica Neue', sans-serif;
+    font-size: 11px;
+    font-weight: bold;
+    color: #000000;
+}
+
+/* NeXTSTEP scrollbar */
+.desktop--nextstep .launchpad__content::-webkit-scrollbar {
+    width: 18px;
+}
+
+.desktop--nextstep .launchpad__content::-webkit-scrollbar-track {
+    background: #C0C0C0;
+    border: 1px solid #000000;
+}
+
+.desktop--nextstep .launchpad__content::-webkit-scrollbar-thumb {
+    background: #7F7F7F;
+    border: 1px solid #000000;
+    box-shadow: 1px 1px 0 #FFFFFF inset, -1px -1px 0 #404040 inset;
+}
+
+.desktop--nextstep .launchpad__content::-webkit-scrollbar-thumb:active {
+    box-shadow: -1px -1px 0 #FFFFFF inset, 1px 1px 0 #404040 inset;
+}
+
+.desktop--nextstep .launchpad__content::-webkit-scrollbar-button {
+    background: #C0C0C0;
+    border: 1px solid #000000;
+    height: 18px;
+    box-shadow: 1px 1px 0 #FFFFFF inset, -1px -1px 0 #808080 inset;
+}
+
+.desktop--nextstep .launchpad__content::-webkit-scrollbar-button:active {
+    box-shadow: -1px -1px 0 #FFFFFF inset, 1px 1px 0 #808080 inset;
+}
+
+/* Classic Macintosh Desktop Theme (System 7) */
+
+.desktop--macintosh {
+    background: #FFFFFF;
+    font-family: 'Chicago', 'Charcoal', 'Geneva', monospace;
+}
+
+.desktop--macintosh .desktop__background {
+    background: #FFFFFF;
+    background-image: repeating-linear-gradient(
+        45deg,
+        #FFFFFF 0px,
+        #FFFFFF 2px,
+        #F0F0F0 2px,
+        #F0F0F0 4px
+    );
 }
 
-.desktop--windows .app-name {
-    font-family: 'Segoe UI', sans-serif;
-    font-size: 13px;
-    font-weight: 400;
-    color: #333333;
+/* Classic Mac-style windows */
+.desktop--macintosh .window {
+    border: 2px solid #000000;
+    border-radius: 8px 8px 0 0;
+    box-shadow: 3px 3px 0 rgba(0, 0, 0, 0.3);
+    background: #FFFFFF;
 }
 
-/* Windows scrollbar */
-.desktop--windows .application-menu__content::-webkit-scrollbar {
-    width: 12px;
+.desktop--macintosh .window__header {
+    background: repeating-linear-gradient(
+        90deg,
+        #000000 0px,
+        #000000 1px,
+        #FFFFFF 1px,
+        #FFFFFF 2px
+    );
+    border-bottom: 2px solid #000000;
+    border-radius: 6px 6px 0 0;
+    height: 20px;
+    padding: 0 6px;
 }
 
-.desktop--windows .application-menu__content::-webkit-scrollbar-track {
-    background: #f1f1f1;
-    border-radius: 6px;
+.desktop--macintosh .window__title {
+    font-size: 12px;
+    font-weight: bold;
+    color: #000000;
+    text-align: center;
+    background: #FFFFFF;
+    padding: 0 8px;
+    border: 1px solid #000000;
+    margin: 0 auto;
 }
 
-.desktop--windows .application-menu__content::-webkit-scrollbar-thumb {
-    background: #c1c1c1;
-    border-radius: 6px;
-    border: 2px solid #f1f1f1;
+.desktop--macintosh .window__controls {
+    order: -1;
+    margin-right: auto;
 }
 
-.desktop--windows .application-menu__content::-webkit-scrollbar-thumb:hover {
-    background: #a8a8a8;
+.desktop--macintosh .window__control {
+    width: 14px;
+    height: 14px;
+    border: 1px solid #000000;
+    border-radius: 0;
+    font-size: 9px;
+    font-weight: bold;
+    color: #000000;
+    background: #FFFFFF;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    transition: none;
+    margin-right: 3px;
 }
-/* Linux Desktop Theme (GNOME/Ubuntu inspired) */
 
-.desktop--linux {
-    background: linear-gradient(135deg, #2c001e 0%, #4c2c92 50%, #0e4b99 100%);
-    font-family: 'Ubuntu', 'Cantarell', 'DejaVu Sans', sans-serif;
+.desktop--macintosh .window__control:active {
+    background: #000000;
+    color: #FFFFFF;
 }
 
-.desktop--linux .desktop__background {
-    background-image: 
-        radial-gradient(circle at 30% 70%, rgba(233, 84, 32, 0.2) 0%, transparent 50%),
-        radial-gradient(circle at 70% 30%, rgba(119, 41, 83, 0.3) 0%, transparent 50%),
-        radial-gradient(circle at 50% 50%, rgba(14, 75, 153, 0.2) 0%, transparent 50%);
+.desktop--macintosh .window__control--close {
+    background: #FFFFFF;
 }
 
-/* Linux-style windows (GNOME) */
-.desktop--linux .window {
-    border: 1px solid #2d2d2d;
-    border-radius: 12px 12px 0 0;
-    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3);
-    background: #ffffff;
-    overflow: hidden;
+.desktop--macintosh .window__control--minimize {
+    display: none; /* Classic Mac didn't have minimize */
 }
 
-.desktop--linux .window__header {
-    background: linear-gradient(180deg, #f6f5f4 0%, #e6e5e4 100%);
-    border-bottom: 1px solid #d0cfce;
-    border-radius: 12px 12px 0 0;
-    height: 38px;
-    padding: 0 16px;
+.desktop--macintosh .window__control--maximize {
+    display: none; /* Classic Mac didn't have maximize */
 }
 
-.desktop--linux .window__title {
-    font-size: 14px;
-    font-weight: 500;
-    color: #2e3436;
+.desktop--macintosh .window__control--close::before {
+    content: '□';
+    font-size: 10px;
 }
 
-.desktop--linux .window__control {
-    width: 24px;
-    height: 24px;
-    border: none;
-    border-radius: 50%;
-    font-size: 12px;
-    color: #2e3436;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    transition: all 0.2s ease;
-    margin-left: 8px;
+/* Classic Mac taskbar styling (Menu Bar) */
+.desktop--macintosh .desktop-taskbar {
+    background: #FFFFFF;
+    border-top: 2px solid #000000;
+    box-shadow: 0 -2px 0 #000000;
 }
 
-.desktop--linux .window__control--minimize {
-    background: #f6d32d;
-    border: 1px solid #f5c211;
+.desktop--macintosh .desktop-taskbar .icon {
+    color: #000000;
 }
 
-.desktop--linux .window__control--maximize {
-    background: #33d17a;
-    border: 1px solid #2ec27e;
+.desktop--macintosh .desktop-taskbar .icon:hover {
+    background-color: #000000;
+    color: #FFFFFF;
 }
 
-.desktop--linux .window__control--close {
-    background: #e01b24;
-    border: 1px solid #c01c28;
-    color: white;
+/* Classic Mac taskbar menu styling */
+.desktop--macintosh .desktop-taskbar .menu-icon > menu {
+    background-color: #FFFFFF;
+    border: 2px solid #000000;
+    box-shadow: 4px 4px 0 rgba(0, 0, 0, 0.3);
 }
 
-.desktop--linux .window__control:hover {
-    transform: scale(1.1);
-    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
+.desktop--macintosh .desktop-taskbar .menu-icon > menu .menu-item > label {
+    color: #000000;
 }
 
-.desktop--linux .window__control--minimize::before {
-    content: '−';
-    font-weight: bold;
+.desktop--macintosh .desktop-taskbar .menu-icon > menu .menu-item > .icon {
+    color: #000000;
 }
 
-.desktop--linux .window__control--maximize::before {
-    content: '□';
-    font-weight: bold;
+.desktop--macintosh .desktop-taskbar .menu-icon > menu .menu-item:hover {
+    background: #000000;
+    color: #FFFFFF;
 }
 
-.desktop--linux .window__control--close::before {
-    content: '×';
-    font-weight: bold;
+.desktop--macintosh .desktop-taskbar .menu-icon > menu .menu-item:hover > label,
+.desktop--macintosh .desktop-taskbar .menu-icon > menu .menu-item:hover > .icon {
+    color: #FFFFFF;
 }
 
-/* Linux taskbar styling (GNOME Activities) */
-.desktop--linux .desktop-taskbar {
-    background: rgba(0, 0, 0, 0.85);
-    backdrop-filter: blur(10px);
-    border-top: 1px solid rgba(255, 255, 255, 0.1);
+.desktop--macintosh .desktop-taskbar .menu-icon > menu .menu-separator {
+    border-color: #000000;
 }
 
-.desktop--linux .taskbar-button {
-    background: rgba(255, 255, 255, 0.08);
-    border: 1px solid rgba(255, 255, 255, 0.15);
-    border-radius: 8px;
-    color: #ffffff;
-    font-family: 'Ubuntu', sans-serif;
-    font-size: 13px;
-    font-weight: 400;
-    transition: all 0.3s ease;
+.desktop--macintosh .taskbar-button {
+    background: #FFFFFF;
+    border: 1px solid #000000;
+    border-radius: 0;
+    color: #000000;
+    font-family: 'Chicago', monospace;
+    font-size: 12px;
+    font-weight: bold;
+    transition: none;
 }
 
-.desktop--linux .taskbar-button:hover {
-    background: rgba(255, 255, 255, 0.15);
-    border-color: rgba(255, 255, 255, 0.25);
-    transform: translateY(-1px);
+.desktop--macintosh .taskbar-button:hover {
+    background: #F0F0F0;
 }
 
-.desktop--linux .taskbar-button--active {
-    background: rgba(53, 132, 228, 0.3);
-    border-color: rgba(53, 132, 228, 0.5);
+.desktop--macintosh .taskbar-button:active,
+.desktop--macintosh .taskbar-button--active {
+    background: #000000;
+    color: #FFFFFF;
 }
 
-/* Linux Start Button Styling (GNOME Activities) */
-.desktop--linux .toggle-button {
-    /* Reset selector styles and apply Linux button styling */
+/* Classic Mac Start Button (Apple Menu) */
+.desktop--macintosh .toggle-button {
     position: relative;
-    padding: 8px 16px;
+    padding: 2px 8px;
     display: flex;
     align-items: center;
     justify-content: center;
-    gap: 8px;
-    overflow: hidden;
-    border: 1px solid rgba(255, 255, 255, 0.15);
+    gap: 4px;
+    border: 2px solid #000000;
     outline: none;
-    transition: all 0.3s ease;
-    color: #ffffff;
-    background: linear-gradient(180deg, rgba(53, 132, 228, 0.9) 0%, rgba(26, 95, 180, 0.9) 100%);
-    min-height: 40px;
-    border-radius: 8px;
+    color: #000000;
+    background: #FFFFFF;
+    min-height: 24px;
+    border-radius: 0;
     cursor: pointer;
-    font-family: 'Ubuntu', 'Cantarell', sans-serif;
-    font-weight: 500;
-    text-decoration: none;
-    white-space: nowrap;
-    list-style: none;
-    margin: 0;
-    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
-}
-
-.desktop--linux .toggle-button:hover:not(.toggle-button--disabled) {
-    background: linear-gradient(180deg, rgba(53, 132, 228, 1) 0%, rgba(26, 95, 180, 1) 100%);
-    border-color: rgba(255, 255, 255, 0.25);
-    transform: translateY(-1px);
-    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.25);
+    font-family: 'Chicago', monospace;
+    font-weight: bold;
+    font-size: 12px;
+    box-shadow: none;
 }
 
-.desktop--linux .toggle-button.selected {
-    background: linear-gradient(180deg, rgba(26, 95, 180, 0.9) 0%, rgba(15, 70, 140, 0.9) 100%);
-    color: #ffffff;
-    border-color: rgba(255, 255, 255, 0.3);
-    box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.3), 0 2px 4px rgba(53, 132, 228, 0.4);
+.desktop--macintosh .toggle-button:hover:not(.toggle-button--disabled) {
+    background: #F0F0F0;
 }
 
-.desktop--linux .toggle-button:focus {
-    outline: 2px solid rgba(53, 132, 228, 0.6);
-    outline-offset: 2px;
+.desktop--macintosh .toggle-button:active,
+.desktop--macintosh .toggle-button.selected {
+    background: #000000;
+    color: #FFFFFF;
 }
 
-.desktop--linux .toggle-button--disabled {
-    background: rgba(255, 255, 255, 0.1) !important;
-    color: rgba(255, 255, 255, 0.4) !important;
-    border-color: rgba(255, 255, 255, 0.05) !important;
-    cursor: not-allowed;
-    opacity: 1;
-    box-shadow: none;
+.desktop--macintosh .toggle-button:focus {
+    outline: 2px dotted #000000;
+    outline-offset: -4px;
 }
 
-/* Linux Application Menu (Activities Overview) */
-.desktop--linux .application-menu {
-    background: rgba(36, 31, 49, 0.95);
-    backdrop-filter: blur(20px);
-    border: 1px solid rgba(255, 255, 255, 0.1);
-    border-radius: 12px;
-    box-shadow: 0 16px 48px rgba(0, 0, 0, 0.4);
-    color: #ffffff;
+/* Classic Mac LaunchPad (Apple Menu) */
+.desktop--macintosh .launchpad {
+    background: #FFFFFF;
+    border: 2px solid #000000;
+    border-radius: 0;
+    box-shadow: 4px 4px 0 rgba(0, 0, 0, 0.3);
 }
 
-.desktop--linux .application-menu__header {
-    background: linear-gradient(180deg, rgba(46, 52, 54, 0.8) 0%, rgba(36, 31, 49, 0.8) 100%);
-    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
-    color: #ffffff;
+.desktop--macintosh .launchpad__header {
+    background: repeating-linear-gradient(
+        90deg,
+        #000000 0px,
+        #000000 1px,
+        #FFFFFF 1px,
+        #FFFFFF 2px
+    );
+    border-bottom: 2px solid #000000;
+    color: #000000;
 }
 
-.desktop--linux .application-menu__header h2 {
-    color: #ffffff;
-    font-family: 'Ubuntu', sans-serif;
-    font-weight: 500;
+.desktop--macintosh .launchpad__header h2 {
+    color: #000000;
+    font-family: 'Chicago', monospace;
+    font-weight: bold;
+    font-size: 14px;
+    background: #FFFFFF;
+    padding: 0 8px;
+    border: 1px solid #000000;
+    display: inline-block;
 }
 
-.desktop--linux .application-menu__close {
-    color: #ffffff;
-    background: rgba(255, 255, 255, 0.1);
-    border-radius: 6px;
+.desktop--macintosh .launchpad__close {
+    color: #000000;
+    background: #FFFFFF;
+    border: 1px solid #000000;
+    border-radius: 0;
 }
 
-.desktop--linux .application-menu__close:hover {
-    background: rgba(224, 27, 36, 0.8);
+.desktop--macintosh .launchpad__close:active {
+    background: #000000;
+    color: #FFFFFF;
 }
 
-.desktop--linux .application-menu__search-input {
-    background: rgba(255, 255, 255, 0.1);
-    border: 2px solid rgba(255, 255, 255, 0.2);
-    border-radius: 8px;
-    color: #ffffff;
-    font-family: 'Ubuntu', sans-serif;
+.desktop--macintosh .launchpad__search-input {
+    background: #FFFFFF;
+    border: 2px solid #000000;
+    border-radius: 0;
+    font-family: 'Chicago', monospace;
+    font-size: 12px;
 }
 
-.desktop--linux .application-menu__search-input::placeholder {
-    color: rgba(255, 255, 255, 0.6);
+.desktop--macintosh .launchpad__sidebar {
+    background: #FFFFFF;
+    border-right: 2px solid #000000;
 }
 
-.desktop--linux .application-menu__search-input:focus {
-    border-color: rgba(53, 132, 228, 0.8);
-    background: rgba(255, 255, 255, 0.15);
-    outline: none;
+.desktop--macintosh .launchpad__categories {
+    background: #FFFFFF;
 }
 
-.desktop--linux .application-menu__category {
-    background: rgba(255, 255, 255, 0.1);
-    border: 1px solid rgba(255, 255, 255, 0.2);
-    border-radius: 20px;
-    color: #ffffff;
-    font-family: 'Ubuntu', sans-serif;
-    font-size: 13px;
-    font-weight: 400;
+.desktop--macintosh .launchpad__category {
+    background: #FFFFFF;
+    border: 1px solid #000000;
+    border-radius: 0;
+    color: #000000;
+    font-family: 'Chicago', monospace;
+    font-size: 12px;
+    font-weight: bold;
 }
 
-.desktop--linux .application-menu__category:hover {
-    background: rgba(255, 255, 255, 0.2);
-    border-color: rgba(255, 255, 255, 0.3);
+.desktop--macintosh .launchpad__category:hover {
+    background: #F0F0F0;
 }
 
-.desktop--linux .application-menu__category.active {
-    background: rgba(53, 132, 228, 0.8);
-    border-color: rgba(53, 132, 228, 1);
-    color: #ffffff;
+.desktop--macintosh .launchpad__category:active,
+.desktop--macintosh .launchpad__category.active {
+    background: #000000;
+    color: #FFFFFF;
 }
 
-.desktop--linux .application-menu__app {
-    background: rgba(255, 255, 255, 0.05);
+.desktop--macintosh .launchpad__app {
+    background: #FFFFFF;
     border: 1px solid transparent;
-    border-radius: 12px;
-    transition: all 0.2s ease;
-}
-
-.desktop--linux .application-menu__app:hover {
-    background: rgba(255, 255, 255, 0.15);
-    border-color: rgba(255, 255, 255, 0.2);
-    transform: translateY(-2px);
-    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3);
-}
-
-.desktop--linux .app-name {
-    font-family: 'Ubuntu', sans-serif;
-    font-size: 13px;
-    font-weight: 400;
-    color: #ffffff;
+    border-radius: 0;
+    transition: none;
 }
 
-.desktop--linux .category-title {
-    color: #ffffff;
-    font-family: 'Ubuntu', sans-serif;
-    font-weight: 500;
+.desktop--macintosh .launchpad__app:hover {
+    background: #000000;
+    color: #FFFFFF;
 }
 
-/* Linux scrollbar */
-.desktop--linux .application-menu__content::-webkit-scrollbar {
-    width: 8px;
+.desktop--macintosh .launchpad__app:hover .app-name {
+    color: #FFFFFF;
 }
 
-.desktop--linux .application-menu__content::-webkit-scrollbar-track {
-    background: rgba(255, 255, 255, 0.1);
-    border-radius: 4px;
+.desktop--macintosh .app-name {
+    font-family: 'Chicago', monospace;
+    font-size: 12px;
+    font-weight: bold;
+    color: #000000;
 }
 
-.desktop--linux .application-menu__content::-webkit-scrollbar-thumb {
-    background: rgba(255, 255, 255, 0.3);
-    border-radius: 4px;
+/* Classic Mac scrollbar */
+.desktop--macintosh .launchpad__content::-webkit-scrollbar {
+    width: 16px;
 }
 
-.desktop--linux .application-menu__content::-webkit-scrollbar-thumb:hover {
-    background: rgba(255, 255, 255, 0.5);
+.desktop--macintosh .launchpad__content::-webkit-scrollbar-track {
+    background: #FFFFFF;
+    border: 1px solid #000000;
 }
-/* macOS Desktop Theme */
 
-.desktop--macos {
-    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-    font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'Helvetica Neue', Arial, sans-serif;
+.desktop--macintosh .launchpad__content::-webkit-scrollbar-thumb {
+    background: repeating-linear-gradient(
+        45deg,
+        #000000 0px,
+        #000000 2px,
+        #FFFFFF 2px,
+        #FFFFFF 4px
+    );
+    border: 1px solid #000000;
 }
 
-.desktop--macos .desktop__background {
-    background-image: 
-        radial-gradient(circle at 25% 75%, rgba(102, 126, 234, 0.3) 0%, transparent 50%),
-        radial-gradient(circle at 75% 25%, rgba(118, 75, 162, 0.3) 0%, transparent 50%),
-        radial-gradient(circle at 50% 50%, rgba(255, 255, 255, 0.1) 0%, transparent 50%);
+.desktop--macintosh .launchpad__content::-webkit-scrollbar-button {
+    background: #FFFFFF;
+    border: 1px solid #000000;
+    height: 16px;
 }
 
-/* macOS-style windows */
-.desktop--macos .window {
-    border: 1px solid rgba(0, 0, 0, 0.1);
-    border-radius: 12px;
-    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
-    background: rgba(255, 255, 255, 0.95);
-    backdrop-filter: blur(20px);
-    overflow: hidden;
+.desktop--macintosh .launchpad__content::-webkit-scrollbar-button:active {
+    background: #000000;
 }
 
-.desktop--macos .window__header {
-    background: linear-gradient(180deg, rgba(255, 255, 255, 0.8) 0%, rgba(245, 245, 245, 0.8) 100%);
-    backdrop-filter: blur(20px);
-    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
-    border-radius: 12px 12px 0 0;
-    height: 36px;
-    padding: 0 16px;
+/* MSX Desktop Theme (MSX-DOS inspired) */
+
+.desktop--msx {
+    background: #2121DE;
+    font-family: 'Courier New', 'Consolas', monospace;
 }
 
-.desktop--macos .window__title {
-    font-size: 13px;
-    font-weight: 600;
-    color: #1d1d1f;
-    text-align: center;
+.desktop--msx .desktop__background {
+    background: #2121DE;
+    background-image: 
+        repeating-linear-gradient(
+            0deg,
+            transparent,
+            transparent 2px,
+            rgba(0, 0, 0, 0.1) 2px,
+            rgba(0, 0, 0, 0.1) 4px
+        );
+}
+
+/* MSX-style windows */
+.desktop--msx .window {
+    border: 4px solid #21DE21;
+    border-radius: 0;
+    box-shadow: 0 0 20px rgba(33, 222, 33, 0.5);
+    background: #2121DE;
 }
 
-.desktop--macos .window__controls {
-    order: -1;
-    margin-right: auto;
+.desktop--msx .window__header {
+    background: #21DE21;
+    border-bottom: 4px solid #21DE21;
+    border-radius: 0;
+    height: 32px;
+    padding: 0 8px;
 }
 
-.desktop--macos .window__control {
-    width: 12px;
-    height: 12px;
-    border: none;
-    border-radius: 50%;
-    font-size: 8px;
-    color: rgba(0, 0, 0, 0.6);
+.desktop--msx .window__title {
+    font-size: 14px;
+    font-weight: bold;
+    color: #2121DE;
+    text-transform: uppercase;
+    letter-spacing: 2px;
+}
+
+.desktop--msx .window__control {
+    width: 24px;
+    height: 24px;
+    border: 2px solid #21DE21;
+    border-radius: 0;
+    font-size: 12px;
+    font-weight: bold;
+    color: #21DE21;
+    background: #2121DE;
     display: flex;
     align-items: center;
     justify-content: center;
-    transition: all 0.2s ease;
-    margin-right: 8px;
-    position: relative;
+    transition: none;
+    margin-left: 4px;
 }
 
-.desktop--macos .window__control::before {
-    opacity: 0;
-    transition: opacity 0.2s ease;
+.desktop--msx .window__control:hover {
+    background: #21DE21;
+    color: #2121DE;
 }
 
-.desktop--macos .window:hover .window__control::before {
-    opacity: 1;
+.desktop--msx .window__control:active {
+    background: #FFFFFF;
+    color: #2121DE;
 }
 
-.desktop--macos .window__control--close {
-    background: #ff5f57;
-    border: 0.5px solid #e0443e;
+.desktop--msx .window__control--close::before {
+    content: 'X';
 }
 
-.desktop--macos .window__control--minimize {
-    background: #ffbd2e;
-    border: 0.5px solid #dea123;
+.desktop--msx .window__control--minimize::before {
+    content: '_';
 }
 
-.desktop--macos .window__control--maximize {
-    background: #28ca42;
-    border: 0.5px solid #1aad34;
+.desktop--msx .window__control--maximize::before {
+    content: '□';
 }
 
-.desktop--macos .window__control:hover {
-    transform: scale(1.1);
+/* MSX taskbar styling */
+.desktop--msx .desktop-taskbar {
+    background: #21DE21;
+    border-top: 4px solid #FFFFFF;
+    box-shadow: 0 0 20px rgba(33, 222, 33, 0.5);
 }
 
-.desktop--macos .window__control--close::before {
-    content: '×';
-    font-weight: bold;
-    font-size: 10px;
+.desktop--msx .desktop-taskbar .icon {
+    color: #2121DE;
+    text-shadow: 0 0 5px rgba(33, 33, 222, 0.5);
 }
 
-.desktop--macos .window__control--minimize::before {
-    content: '−';
-    font-weight: bold;
-    font-size: 8px;
+.desktop--msx .desktop-taskbar .icon:hover {
+    color: #FFFFFF;
+    background-color: #2121DE;
+    box-shadow: 0 0 10px rgba(33, 33, 222, 0.8);
 }
 
-.desktop--macos .window__control--maximize::before {
-    content: '+';
-    font-weight: bold;
-    font-size: 8px;
+/* MSX taskbar menu styling */
+.desktop--msx .desktop-taskbar .menu-icon > menu {
+    background-color: #2121DE;
+    border: 4px solid #21DE21;
+    box-shadow: 0 0 30px rgba(33, 222, 33, 0.6);
 }
 
-/* macOS taskbar styling (Dock-inspired) */
-.desktop--macos .desktop-taskbar {
-    background: rgba(255, 255, 255, 0.8);
-    backdrop-filter: blur(20px);
-    border-top: 1px solid rgba(0, 0, 0, 0.1);
-    border-radius: 16px 16px 0 0;
+.desktop--msx .desktop-taskbar .menu-icon > menu .menu-item > label {
+    color: #21DE21;
+    text-transform: uppercase;
 }
 
-.desktop--macos .taskbar-button {
-    background: rgba(0, 0, 0, 0.05);
-    border: 1px solid rgba(0, 0, 0, 0.1);
-    border-radius: 12px;
-    color: #1d1d1f;
-    font-family: -apple-system, BlinkMacSystemFont, sans-serif;
-    font-size: 13px;
-    font-weight: 500;
-    transition: all 0.3s ease;
-    backdrop-filter: blur(10px);
+.desktop--msx .desktop-taskbar .menu-icon > menu .menu-item > .icon {
+    color: #21DE21;
 }
 
-.desktop--macos .taskbar-button:hover {
-    background: rgba(0, 0, 0, 0.1);
-    border-color: rgba(0, 0, 0, 0.2);
-    transform: translateY(-2px);
-    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
+.desktop--msx .desktop-taskbar .menu-icon > menu .menu-item:hover {
+    background: #21DE21;
+    color: #2121DE;
 }
 
-.desktop--macos .taskbar-button--active {
-    background: rgba(0, 122, 255, 0.15);
-    border-color: rgba(0, 122, 255, 0.3);
-    color: #007aff;
+.desktop--msx .desktop-taskbar .menu-icon > menu .menu-item:hover > label,
+.desktop--msx .desktop-taskbar .menu-icon > menu .menu-item:hover > .icon {
+    color: #2121DE;
 }
 
-/* macOS Start Button Styling (Dock-inspired) */
-.desktop--macos .toggle-button {
-    /* Reset selector styles and apply macOS button styling */
+.desktop--msx .desktop-taskbar .menu-icon > menu .menu-separator {
+    border-color: #21DE21;
+}
+
+.desktop--msx .taskbar-button {
+    background: #2121DE;
+    border: 2px solid #21DE21;
+    border-radius: 0;
+    color: #21DE21;
+    font-family: 'Courier New', monospace;
+    font-size: 12px;
+    font-weight: bold;
+    text-transform: uppercase;
+    transition: none;
+}
+
+.desktop--msx .taskbar-button:hover {
+    background: #21DE21;
+    color: #2121DE;
+}
+
+.desktop--msx .taskbar-button:active,
+.desktop--msx .taskbar-button--active {
+    background: #FFFFFF;
+    color: #2121DE;
+    border-color: #FFFFFF;
+}
+
+/* MSX Start Button */
+.desktop--msx .toggle-button {
     position: relative;
-    padding: 8px 16px;
+    padding: 6px 12px;
     display: flex;
     align-items: center;
     justify-content: center;
-    gap: 8px;
-    overflow: hidden;
-    border: 1px solid rgba(0, 0, 0, 0.1);
+    gap: 6px;
+    border: 3px solid #FFFFFF;
     outline: none;
-    transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
-    color: #1d1d1f;
-    background: linear-gradient(180deg, rgba(255, 255, 255, 0.9) 0%, rgba(248, 248, 248, 0.9) 100%);
-    min-height: 40px;
-    border-radius: 12px;
+    color: #2121DE;
+    background: #21DE21;
+    min-height: 36px;
+    border-radius: 0;
     cursor: pointer;
-    font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Display', sans-serif;
-    font-weight: 500;
-    text-decoration: none;
-    white-space: nowrap;
-    list-style: none;
-    margin: 0;
-    backdrop-filter: blur(20px);
-    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+    font-family: 'Courier New', monospace;
+    font-weight: bold;
+    font-size: 13px;
+    text-transform: uppercase;
+    letter-spacing: 2px;
+    box-shadow: 0 0 10px rgba(33, 222, 33, 0.8);
 }
 
-.desktop--macos .toggle-button:hover:not(.toggle-button--disabled) {
-    background: linear-gradient(180deg, rgba(255, 255, 255, 0.95) 0%, rgba(245, 245, 245, 0.95) 100%);
-    border-color: rgba(0, 0, 0, 0.15);
-    transform: translateY(-1px);
-    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
+.desktop--msx .toggle-button:hover:not(.toggle-button--disabled) {
+    background: #FFFFFF;
+    color: #2121DE;
+    box-shadow: 0 0 20px rgba(255, 255, 255, 0.8);
 }
 
-.desktop--macos .toggle-button.selected {
-    background: linear-gradient(180deg, rgba(0, 122, 255, 0.9) 0%, rgba(0, 100, 210, 0.9) 100%);
-    color: white;
-    border-color: rgba(0, 122, 255, 0.3);
-    box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.2), 0 2px 8px rgba(0, 122, 255, 0.3);
+.desktop--msx .toggle-button:active,
+.desktop--msx .toggle-button.selected {
+    background: #DE2121;
+    color: #FFFFFF;
+    border-color: #FFFFFF;
+    box-shadow: 0 0 20px rgba(222, 33, 33, 0.8);
 }
 
-.desktop--macos .toggle-button:focus {
-    outline: 2px solid rgba(0, 122, 255, 0.5);
+.desktop--msx .toggle-button:focus {
+    outline: 2px dotted #FFFFFF;
     outline-offset: 2px;
 }
 
-.desktop--macos .toggle-button--disabled {
-    background: rgba(248, 248, 248, 0.5) !important;
-    color: rgba(60, 60, 67, 0.3) !important;
-    border-color: rgba(0, 0, 0, 0.05) !important;
-    cursor: not-allowed;
-    opacity: 1;
-    box-shadow: none;
-    backdrop-filter: none;
+/* MSX LaunchPad */
+.desktop--msx .launchpad {
+    background: #2121DE;
+    border: 4px solid #21DE21;
+    border-radius: 0;
+    box-shadow: 0 0 30px rgba(33, 222, 33, 0.6);
 }
 
-/* macOS Application Menu (Launchpad-inspired) */
-.desktop--macos .application-menu {
-    background: rgba(255, 255, 255, 0.9);
-    backdrop-filter: blur(40px);
-    border: 1px solid rgba(0, 0, 0, 0.1);
-    border-radius: 20px;
-    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
+.desktop--msx .launchpad__header {
+    background: #21DE21;
+    border-bottom: 4px solid #FFFFFF;
+    color: #2121DE;
 }
 
-.desktop--macos .application-menu__header {
-    background: linear-gradient(180deg, rgba(255, 255, 255, 0.8) 0%, rgba(248, 248, 248, 0.8) 100%);
-    backdrop-filter: blur(20px);
-    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
-    border-radius: 20px 20px 0 0;
+.desktop--msx .launchpad__header h2 {
+    color: #2121DE;
+    font-family: 'Courier New', monospace;
+    font-weight: bold;
+    font-size: 16px;
+    text-transform: uppercase;
+    letter-spacing: 3px;
 }
 
-.desktop--macos .application-menu__header h2 {
-    color: #1d1d1f;
-    font-family: -apple-system, BlinkMacSystemFont, sans-serif;
-    font-weight: 600;
-    font-size: 20px;
+.desktop--msx .launchpad__close {
+    color: #2121DE;
+    background: #FFFFFF;
+    border: 2px solid #2121DE;
+    border-radius: 0;
+    font-weight: bold;
 }
 
-.desktop--macos .application-menu__close {
-    color: #8e8e93;
-    background: rgba(0, 0, 0, 0.05);
-    border-radius: 8px;
-    font-size: 18px;
+.desktop--msx .launchpad__close:hover {
+    background: #DE2121;
+    color: #FFFFFF;
+    border-color: #FFFFFF;
 }
 
-.desktop--macos .application-menu__close:hover {
-    background: rgba(255, 95, 87, 0.8);
-    color: white;
+.desktop--msx .launchpad__search-input {
+    background: #2121DE;
+    border: 3px solid #21DE21;
+    border-radius: 0;
+    color: #21DE21;
+    font-family: 'Courier New', monospace;
+    font-size: 13px;
+    font-weight: bold;
 }
 
-.desktop--macos .application-menu__search-input {
-    background: rgba(0, 0, 0, 0.05);
-    border: 2px solid rgba(0, 0, 0, 0.1);
-    border-radius: 12px;
-    color: #1d1d1f;
-    font-family: -apple-system, BlinkMacSystemFont, sans-serif;
-    font-size: 15px;
+.desktop--msx .launchpad__search-input::placeholder {
+    color: rgba(33, 222, 33, 0.5);
 }
 
-.desktop--macos .application-menu__search-input::placeholder {
-    color: #8e8e93;
+.desktop--msx .launchpad__search-input:focus {
+    border-color: #FFFFFF;
+    outline: none;
+    box-shadow: 0 0 10px rgba(255, 255, 255, 0.5);
 }
 
-.desktop--macos .application-menu__search-input:focus {
-    border-color: rgba(0, 122, 255, 0.8);
-    background: rgba(255, 255, 255, 0.8);
-    outline: none;
-    box-shadow: 0 0 0 4px rgba(0, 122, 255, 0.1);
+.desktop--msx .launchpad__sidebar {
+    background: #2121DE;
+    border-right: 3px solid #21DE21;
 }
 
-.desktop--macos .application-menu__category {
-    background: rgba(0, 0, 0, 0.05);
-    border: 1px solid rgba(0, 0, 0, 0.1);
-    border-radius: 20px;
-    color: #1d1d1f;
-    font-family: -apple-system, BlinkMacSystemFont, sans-serif;
-    font-size: 13px;
-    font-weight: 500;
+.desktop--msx .launchpad__categories {
+    background: #2121DE;
 }
 
-.desktop--macos .application-menu__category:hover {
-    background: rgba(0, 0, 0, 0.1);
-    border-color: rgba(0, 0, 0, 0.2);
+.desktop--msx .launchpad__category {
+    background: #2121DE;
+    border: 2px solid #21DE21;
+    border-radius: 0;
+    color: #21DE21;
+    font-family: 'Courier New', monospace;
+    font-size: 12px;
+    font-weight: bold;
+    text-transform: uppercase;
 }
 
-.desktop--macos .application-menu__category.active {
-    background: rgba(0, 122, 255, 0.8);
-    border-color: rgba(0, 122, 255, 1);
-    color: white;
+.desktop--msx .launchpad__category:hover {
+    background: #21DE21;
+    color: #2121DE;
 }
 
-.desktop--macos .application-menu__app {
-    background: rgba(255, 255, 255, 0.6);
-    border: 1px solid transparent;
-    border-radius: 16px;
-    transition: all 0.3s ease;
-    backdrop-filter: blur(10px);
+.desktop--msx .launchpad__category:active,
+.desktop--msx .launchpad__category.active {
+    background: #FFFFFF;
+    color: #2121DE;
+    border-color: #FFFFFF;
 }
 
-.desktop--macos .application-menu__app:hover {
-    background: rgba(255, 255, 255, 0.8);
-    border-color: rgba(0, 0, 0, 0.1);
-    transform: translateY(-4px) scale(1.05);
-    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
+.desktop--msx .launchpad__app {
+    background: #2121DE;
+    border: 2px solid transparent;
+    border-radius: 0;
+    transition: none;
 }
 
-.desktop--macos .app-name {
-    font-family: -apple-system, BlinkMacSystemFont, sans-serif;
+.desktop--msx .launchpad__app:hover {
+    background: #21DE21;
+    border-color: #21DE21;
+}
+
+.desktop--msx .launchpad__app:hover .app-name {
+    color: #2121DE;
+}
+
+.desktop--msx .app-name {
+    font-family: 'Courier New', monospace;
     font-size: 12px;
-    font-weight: 500;
-    color: #1d1d1f;
+    font-weight: bold;
+    color: #21DE21;
+    text-transform: uppercase;
 }
 
-.desktop--macos .category-title {
-    color: #1d1d1f;
-    font-family: -apple-system, BlinkMacSystemFont, sans-serif;
-    font-weight: 600;
+/* MSX scrollbar */
+.desktop--msx .launchpad__content::-webkit-scrollbar {
+    width: 16px;
 }
 
-/* macOS scrollbar */
-.desktop--macos .application-menu__content::-webkit-scrollbar {
-    width: 6px;
+.desktop--msx .launchpad__content::-webkit-scrollbar-track {
+    background: #2121DE;
+    border: 2px solid #21DE21;
 }
 
-.desktop--macos .application-menu__content::-webkit-scrollbar-track {
-    background: transparent;
+.desktop--msx .launchpad__content::-webkit-scrollbar-thumb {
+    background: #21DE21;
+    border: 2px solid #2121DE;
 }
 
-.desktop--macos .application-menu__content::-webkit-scrollbar-thumb {
-    background: rgba(0, 0, 0, 0.2);
-    border-radius: 3px;
+.desktop--msx .launchpad__content::-webkit-scrollbar-thumb:hover {
+    background: #FFFFFF;
 }
 
-.desktop--macos .application-menu__content::-webkit-scrollbar-thumb:hover {
-    background: rgba(0, 0, 0, 0.4);
+.desktop--msx .launchpad__content::-webkit-scrollbar-button {
+    background: #21DE21;
+    border: 2px solid #2121DE;
+    height: 16px;
+}
+
+.desktop--msx .launchpad__content::-webkit-scrollbar-button:hover {
+    background: #FFFFFF;
 }
+
 /**************************************/
 /*********** content-editor ***********/
 /**************************************/