* {margin: 0;padding: 0;box-sizing: border-box;transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);}.progress-container {width: 100%;height: 4px;background: transparent;position: fixed;top: 0;left: 0;z-index: 1000;opacity: 0; }.progress-bar {height: 4px;background: var(--primary-dark);width: 0%;}body {font-family: Arial, sans-serif;line-height: 1.6;color: var(--text-color);background-color: var(--bg-color);display: flex;flex-direction: column;min-height: 100vh;overflow: hidden; border: none;outline: none;}:root {--primary: #7b1fa2;--primary-light: #ab47bc;--primary-dark: #4a148c;--secondary: #ce93d8;--text: #f3e5f5;--bg-color: #f5f3fa;--text-color: #424242;--card-bg: #ffffff;--border-color: #e1bee7;--shadow-color: rgba(123, 26, 162, 0.1);--button-bg: var(--primary);--button-hover: var(--primary-dark);--button-text: white;--code-bg: #f0eaf7;--code-text: #3a0ca3;--block-bg: #f8f5fc;--block-border: var(--secondary);}:root.dark-mode {--primary: #ab47bc;--primary-light: #ce93d8;--primary-dark: #6a1b9a;--secondary: #7b1fa2;--text: #e1bee7;--bg-color: #1a1a2e;--text-color: #e0e0e0;--card-bg: #252a41;--border-color: #3a3f58;--shadow-color: rgba(0, 0, 0, 0.3);--button-bg: var(--primary-light);--button-hover: var(--primary);--button-text: #121212;--code-bg: #2d1b4e;--code-text: #e0b7ff;--block-bg: #2a1950;--block-border: var(--primary-light);}header {background-color: var(--primary);color: white;padding: 1rem 1.5rem;display: flex;flex-wrap: nowrap;justify-content: space-between;align-items: center;position: relative;z-index: 102;box-shadow: 0 2px 10px var(--shadow-color);}.logo {display: flex;align-items: center;gap: 1rem;white-space: nowrap;}.logo-icon {width: 40px;height: 40px;background-color: white;border-radius: 8px;display: flex;align-items: center;justify-content: center;color: var(--primary);font-weight: bold;font-size: 1.2rem;box-shadow: 0 2px 5px var(--shadow-color);transition: transform 0.3s, box-shadow 0.3s;}.logo:hover .logo-icon {transform: rotate(5deg) scale(1.05);box-shadow: 0 4px 8px var(--shadow-color);}.nav-container {display: flex;align-items: center;flex: 1;justify-content: flex-end;margin-left: 1rem;}.language-toggle {background: none;border: none;color: white;padding: 0.5rem 0.8rem;position: relative;white-space: nowrap;transition: color 0.3s, transform 0.3s;cursor: pointer;font-size: 1rem;text-align: left;}.language-toggle::after {content: "";position: absolute;bottom: 0;left: 0;width: 0;height: 2px;background-color: var(--secondary);transition: width 0.3s;}.language-toggle:hover {color: var(--secondary);transform: translateY(-2px);}.language-toggle:hover::after {width: 100%;}:root.dark-mode .language-toggle:hover {color: white;}:root.dark-mode .language-toggle::after {background-color: white;}nav ul {display: flex;list-style: none;gap: 1.2rem;padding: 0;margin: 0;flex-wrap: nowrap;align-items: center;}nav li {display: flex;align-items: center;}nav a {color: white;text-decoration: none;padding: 0.5rem 0.8rem;position: relative;white-space: nowrap;transition: color 0.3s, transform 0.3s;}nav a::after {content: "";position: absolute;bottom: 0;left: 0;width: 0;height: 2px;background-color: var(--secondary);transition: width 0.3s;}nav a:hover {color: var(--secondary);transform: translateY(-2px);}:root.dark-mode nav a:hover {color: white;}:root.dark-mode nav a::after {background-color: white;}nav a:hover::after {width: 100%;}.theme-toggle {background: none;border: none;color: white;padding: 0.5rem 0.8rem;position: relative;white-space: nowrap;transition: color 0.3s, transform 0.3s;cursor: pointer;font-size: 1rem;display: flex;align-items: center;gap: 10px;}.theme-toggle::after {content: "";position: absolute;bottom: 0;left: 0;width: 0;height: 2px;background-color: var(--secondary);transition: width 0.3s;}.theme-toggle:hover {color: var(--secondary);transform: translateY(-2px);}:root.dark-mode .theme-toggle:hover {color: white;}:root.dark-mode .theme-toggle::after {background-color: white;}.theme-toggle:hover::after {width: 100%;}.theme-icon {display: inline-block;width: 18px;height: 18px;position: relative;}.theme-icon.dark::before {content: "";position: absolute;width: 18px;height: 18px;border-radius: 50%;box-shadow: -5px 0 0 0 currentColor;background-color: transparent;}.theme-icon.light::before {content: "";position: absolute;width: 18px;height: 18px;border-radius: 50%;background-color: currentColor;}.menu-toggle {background: none;border: none;color: white;font-size: 1.5rem;cursor: pointer;z-index: 101;display: none; align-items: center;justify-content: center;margin-left: 10px;transition: transform 0.2s, color 0.3s;}.menu-toggle:hover {color: var(--secondary);transform: scale(1.1);}.mobile-float-buttons {position: fixed;bottom: 10px;right: 10px;display: flex;flex-direction: column;gap: 10px;z-index: 101;align-items: center; justify-content: center; width: 50px; }.sidebar-toggle {display: none; background-color: var(--primary);box-shadow: 0 2px 10px var(--shadow-color);width: 50px;height: 50px;font-size: 1.5rem;z-index: 101;border: none;color: white;cursor: pointer;transition: transform 0.3s, box-shadow 0.3s;border-radius: 8px; padding: 0; margin: 0; display: flex; align-items: center;justify-content: center;}.sidebar-toggle:hover {transform: scale(1.05);box-shadow: 0 4px 15px var(--shadow-color);}.scroll-top {display: none;background-color: var(--primary);box-shadow: 0 2px 10px var(--shadow-color);width: 50px;height: 50px;font-size: 1.5rem;z-index: 101;border: none;color: white;cursor: pointer;transition: transform 0.3s, box-shadow 0.3s, opacity 0.3s;border-radius: 8px; padding: 0; margin: 0; display: flex; align-items: center;justify-content: center;}.scroll-top::before {content: ">";display: inline-block;transform: rotate(-90deg);font-weight: bold;}.scroll-top:hover {transform: scale(1.05);box-shadow: 0 4px 15px var(--shadow-color);}.sidebar.active ~ .mobile-float-buttons .scroll-top,.mainNav.active ~ .mobile-float-buttons .scroll-top {display: none !important;}.content-container {display: flex;flex: 1;overflow: hidden; }.sidebar {width: 250px;background-color: var(--primary-dark);color: white;padding: 1rem;box-shadow: 2px 0 10px var(--shadow-color);overflow-y: auto; height: calc(100vh - 64px); position: sticky;top: 64px; }.sidebar::-webkit-scrollbar {width: 8px;}.sidebar::-webkit-scrollbar-track {background: var(--primary-dark);}.sidebar::-webkit-scrollbar-thumb {background-color: var(--primary-light);border-radius: 4px;transition: background-color 0.3s;}.sidebar::-webkit-scrollbar-thumb:hover {background-color: var(--primary);}.sidebar h3 {margin-bottom: 1rem;padding-bottom: 0.5rem;border-bottom: 1px solid var(--secondary);position: relative;display: inline-block;}.sidebar h3::after {content: "";position: absolute;bottom: -1px;left: 0;width: 0;height: 1px;background-color: var(--primary-light);transition: width 0.5s;}.sidebar:hover h3::after {width: 100%;}.sidebar-menu {list-style: none;}.sidebar-menu li {margin-bottom: 0.5rem;}.sidebar-menu a {color: var(--text);text-decoration: none;display: block;padding: 0.5rem;border-radius: 4px;transition: background-color 0.3s, box-shadow 0.3s, transform 0.2s;}.sidebar-menu a:hover {background-color: var(--primary-light);box-shadow: 0 2px 5px var(--shadow-color);transform: translateX(3px);}.submenu {margin-left: 1rem;display: none;animation: fadeIn 0.3s ease;list-style: none;}.submenu.active {display: block;}.has-submenu::after {content: "+";float: right;transition: transform 0.3s;}.has-submenu.active::after {content: "-";transform: rotate(180deg);}.main-content-wrapper {flex: 1;overflow-y: auto; max-height: calc(100vh - 64px); }.main-content {padding: 2rem;margin: 0;box-shadow: 0 0 10px var(--shadow-color);background-color: var(--card-bg);max-width: 100%;width: 100%;}.main-content-wrapper::-webkit-scrollbar {width: 8px;}.main-content-wrapper::-webkit-scrollbar-track {background: var(--bg-color);}.main-content-wrapper::-webkit-scrollbar-thumb {background-color: var(--primary-light);border-radius: 4px;transition: background-color 0.3s;}.main-content-wrapper::-webkit-scrollbar-thumb:hover {background-color: var(--primary);}.main-content h1, .main-content h2, .main-content h3, .main-content h4, .main-content h5 {color: var(--primary);margin: 1.5rem 0 1rem;scroll-margin-top: 80px;padding-left: 0;position: static;}.main-content h1::before,.main-content h2::before {display: none;}.main-content p {margin-bottom: 1rem;color: var(--text-color);}.content-button {background-color: var(--button-bg);color: var(--button-text);border: none;border-radius: 6px;padding: 10px 20px;font-size: 1rem;cursor: pointer;margin: 5px;transition: all 0.3s ease;box-shadow: 0 2px 5px var(--shadow-color);}.content-button:hover {background-color: var(--button-hover);transform: translateY(-2px);box-shadow: 0 4px 8px var(--shadow-color);}.content-button:active {transform: translateY(0);box-shadow: 0 2px 3px var(--shadow-color);}.button-group {margin: 2rem 0;padding: 1rem;background-color: rgba(123, 26, 162, 0.05);border-radius: 8px;border-left: 3px solid var(--primary);}:root.dark-mode .button-group {background-color: rgba(171, 71, 188, 0.1);}.code-block {background-color: var(--code-bg);color: var(--code-text);border-radius: 8px;padding: 1.5rem;margin: 2rem 0;font-family: 'Courier New', Courier, monospace;overflow-x: auto;box-shadow: 0 2px 8px var(--shadow-color);position: relative;}.code-block::-webkit-scrollbar {height: 6px;}.code-block::-webkit-scrollbar-thumb {background-color: var(--primary-light);border-radius: 3px;}.code-language {position: absolute;top: 0;right: 0;padding: 3px 10px;font-size: 0.8rem;background-color: var(--primary-dark);color: white;border-radius: 0 8px 0 8px;}.content-block {background-color: var(--block-bg);border: 1px solid var(--block-border);border-radius: 8px;padding: 1.5rem;margin: 2rem 0;box-shadow: 0 3px 10px var(--shadow-color);}.content-block h4 {color: var(--primary);margin-top: 0;margin-bottom: 1rem;padding-bottom: 0.5rem;border-bottom: 1px dashed var(--block-border);}.block-highlight {border-left: 4px solid var(--primary);padding-left: 1rem;margin-left: -1rem;}.content-image {margin: 2rem 0;border-radius: 8px 8px 0 0; overflow: hidden;box-shadow: 0 4px 12px var(--shadow-color);position: relative;cursor: zoom-in; display: block;max-width: 100%;}@media (min-width: 1025px) {.content-image {max-width: 800px; margin-left: auto;margin-right: auto;}}.content-image img {max-width: 100%;height: auto;display: block;border: none;transition: none;opacity: 0;transition: opacity 0.5s ease-in-out;}.content-image img.loaded {opacity: 1;}.content-image:hover img {transform: none;}.image-caption {padding: 0.8rem;background-color: rgba(123, 26, 162, 0.8);color: white;font-size: 0.9rem;text-align: center;border-radius: 0; }:root.dark-mode .image-caption {background-color: rgba(171, 71, 188, 0.8);}.image-placeholder {position: absolute;top: 0;left: 0;width: 100%;height: 100%;background-color: #f0eaf7;display: flex;align-items: center;justify-content: center;overflow: hidden;}:root.dark-mode .image-placeholder {background-color: #2d1b4e;}.image-placeholder::after {content: '';position: absolute;top: 0;left: -100%;width: 100%;height: 100%;background: linear-gradient(90deg,transparent,rgba(123, 26, 162, 0.2),transparent);animation: loadingShimmer 1.5s infinite;}:root.dark-mode .image-placeholder::after {background: linear-gradient(90deg,transparent,rgba(171, 71, 188, 0.3),transparent);}@keyframes loadingShimmer {100% {left: 100%;}}.image-viewer {position: fixed;top: 0;left: 0;width: 100%;height: 100%;background-color: rgba(0, 0, 0, 0.9);display: none;justify-content: center;align-items: center;z-index: 2000;opacity: 0;transition: opacity 0.3s ease;cursor: zoom-out; }.image-viewer.active {display: flex;opacity: 1;}.image-viewer-content {position: relative;max-width: 90%;max-height: 90%;cursor: auto; }.image-viewer img {max-width: 100%;max-height: 85vh;display: block;border: none;}.image-viewer-caption {color: white;text-align: center;padding: 1rem;font-size: 1rem;}.image-viewer-close {position: absolute;top: -40px;right: -40px;background: none;border: none;color: white;font-size: 2rem;cursor: pointer;width: 40px;height: 40px;display: flex;align-items: center;justify-content: center;transition: transform 0.2s;}.image-viewer-close:hover {transform: scale(1.1);}.toc-sidebar {width: 250px;background-color: var(--card-bg);border-left: 1px solid var(--border-color);padding: 1rem;box-shadow: -2px 0 10px var(--shadow-color);overflow-y: auto;height: calc(100vh - 64px);position: sticky;top: 64px;display: flex;flex-direction: column;justify-content: center;}.toc-content {margin-top: 0;}.toc-sidebar::-webkit-scrollbar {width: 8px;}.toc-sidebar::-webkit-scrollbar-track {background: var(--card-bg);}.toc-sidebar::-webkit-scrollbar-thumb {background-color: var(--primary-light);border-radius: 4px;transition: background-color 0.3s;}.toc-sidebar::-webkit-scrollbar-thumb:hover {background-color: var(--primary);}.toc-sidebar h3 {color: var(--primary);margin-bottom: 1rem;padding-bottom: 0.5rem;border-bottom: 1px solid var(--border-color);}.toc-menu {list-style: none;}.toc-menu li {margin-bottom: 0.8rem;}.toc-menu a {color: var(--primary-dark);text-decoration: none;transition: color 0.3s, transform 0.2s, padding-left 0.3s, font-weight 0.3s;display: block;text-decoration: none !important;}.toc-menu a:hover {color: var(--primary-light);text-decoration: none !important;transform: translateX(3px);padding-left: 3px;}.toc-menu a.active {font-weight: bold;color: var(--primary);}:root.dark-mode .toc-sidebar h3,:root.dark-mode .toc-menu a {color: white;}:root.dark-mode .toc-menu a:hover {color: var(--primary-light);}:root.dark-mode .toc-menu a.active {color: var(--primary-light);}.footer {background-color: var(--primary);color: white;text-align: center;padding: 1rem 1rem 1.5rem;box-shadow: 0 -2px 10px var(--shadow-color);position: relative;overflow: hidden;border: none;}.footer::before {content: "";position: absolute;top: 0;left: 0;width: 100%;height: 3px;background: linear-gradient(90deg, transparent, var(--primary-light), transparent);transform: translateX(-100%);animation: footerShine 3s infinite;}@keyframes fadeIn {from { opacity: 0; transform: translateY(10px); }to { opacity: 1; transform: translateY(0); }}@keyframes footerShine {0% { transform: translateX(-100%); }100% { transform: translateX(100%); }}@keyframes menuSlideIn {from { transform: translateY(-10px); opacity: 0; }to { transform: translateY(0); opacity: 1; }}@keyframes menuSlideOut {from { transform: translateY(0); opacity: 1; }to { transform: translateY(-10px); opacity: 0; }}@keyframes sidebarSlideUp {from { transform: translateY(100%); }to { transform: translateY(0); }}@keyframes sidebarSlideDown {from { transform: translateY(0); }to { transform: translateY(100%); }}@media (max-width: 768px) {header {flex-wrap: wrap;}.nav-container {width: 100%;margin-left: 0;margin-top: 1rem;justify-content: space-between;}.menu-toggle {display: flex;}.sidebar-toggle, .scroll-top {display: flex;}nav ul {display: none;flex-direction: column;position: absolute;top: 100%;left: 0;right: 0;background-color: var(--primary-dark);width: 100%;padding: 1rem;margin: 0;border-radius: 0;z-index: 102;box-shadow: 0 5px 10px var(--shadow-color);max-height: 70vh;overflow-y: auto;}nav ul::-webkit-scrollbar {width: 8px;}nav ul::-webkit-scrollbar-track {background: var(--primary-dark);}nav ul::-webkit-scrollbar-thumb {background-color: var(--primary-light);border-radius: 4px;transition: background-color 0.3s;}nav ul::-webkit-scrollbar-thumb:hover {background-color: var(--primary);}nav ul.active {display: flex;animation: menuSlideIn 0.3s ease forwards;}nav ul:not(.active) {animation: menuSlideOut 0.3s ease forwards;}.theme-toggle, .language-toggle {margin: 0.5rem 0 0 0;width: 100%;justify-content: center;}.mobile-float-buttons {display: flex;}.sidebar {position: fixed;left: 0;bottom: 0;width: 100%;max-height: 70vh;transform: translateY(100%);z-index: 100;border-radius: 16px 16px 0 0;height: auto;top: auto;border: none;box-shadow: 0 -2px 15px var(--shadow-color);}.sidebar.active {animation: sidebarSlideUp 0.3s ease forwards;}.sidebar:not(.active) {animation: sidebarSlideDown 0.3s ease forwards;}.main-content-wrapper {max-height: calc(100vh - 112px);}.main-content {padding: 1rem;max-width: 100%;}.toc-sidebar {display: none;}html, body {border: none;outline: none;}.image-viewer-close {top: 10px;right: 10px;}}@media (min-width: 769px) and (max-width: 1024px) {nav ul {flex-wrap: wrap;justify-content: flex-end;}.toc-sidebar {display: none;}.main-content {max-width: 100%;}.scroll-top {display: flex;position: fixed;bottom: 20px;right: 20px;width: 56px;height: 56px;}.menu-toggle, .sidebar-toggle {display: none !important;}}@media (min-width: 1025px) {.toc-sidebar {display: flex; }.main-content {box-shadow: none;padding: 2rem 4rem;max-width: 100%;margin: 0 auto;max-width: 1200px;}.footer {padding-bottom: 2rem;}.scroll-top {display: flex;position: fixed;bottom: 20px;right: 20px;width: 56px;height: 56px;}.menu-toggle, .sidebar-toggle {display: none !important;}}