/* Define custom font */
@font-face {
    font-family: 'Popstar';
    src: url('https://static.igem.wiki/teams/5607/menu/popstar.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

/* Markdown content styling */
.markdown-content {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
    line-height: 1.7;
    color: #333;
    font-size: 1.52rem; /* Slightly larger base text for readability */
}

.markdown-content h1, .markdown-content h2, .markdown-content h3, .markdown-content h4, .markdown-content h5, .markdown-content h6 {
    margin-top: 2rem;
    margin-bottom: 1rem;
    font-weight: 600;
    line-height: 1.25;
    color: #2c3e50;
    /* Offset for fixed header when navigating via anchors */
    scroll-margin-top: 100px;
}

.markdown-content h1 {
    font-size: 2.5rem;
    border-bottom: 2px solid #e9ecef;
    padding-bottom: 0.5rem;
}

.markdown-content h2 {
    font-size: 2rem;
    border-bottom: 1px solid #e9ecef;
    padding-bottom: 0.3rem;
}

.markdown-content h3 {
    font-size: 1.5rem;
}

.markdown-content p {
    margin-bottom: 1rem;
    text-align: justify;
}

.markdown-content ul, .markdown-content ol {
    margin-bottom: 1rem;
    padding-left: 2rem;
}

.markdown-content li {
    margin-bottom: 0.25rem;
}

.markdown-content code {
    background-color: #f8f9fa;
    color: #e83e8c;
    padding: 0.2rem 0.4rem;
    border-radius: 0.25rem;
    font-size: 87.5%;
    font-family: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
}

.markdown-content pre {
    background-color: #f8f9fa;
    border: 1px solid #e9ecef;
    border-radius: 0.375rem;
    padding: 1rem;
    overflow-x: auto;
    margin-bottom: 1rem;
}

.markdown-content pre code {
    background: none;
    color: #212529;
    padding: 0;
    font-size: 0.875rem;
}

.markdown-content table {
    width: 100%;
    margin-bottom: 1rem;
    border-collapse: collapse;
    border: 1px solid #dee2e6;
}

.markdown-content th, .markdown-content td {
    padding: 0.75rem;
    border-top: 1px solid #dee2e6;
    border-right: 1px solid #dee2e6;
    text-align: left;
}

.markdown-content th {
    background-color: #f8f9fa;
    font-weight: 600;
    border-bottom: 2px solid #dee2e6;
}

.markdown-content tr:nth-child(even) {
    background-color: #f8f9fa;
}

.markdown-content blockquote {
    margin: 1rem 0;
    padding: 0.5rem 1rem;
    border-left: 4px solid #007bff;
    background-color: #f8f9fa;
}

.markdown-content a {
    color: #007bff;
    text-decoration: none;
}

.markdown-content a:hover {
    color: #0056b3;
    text-decoration: underline;
}

/* MathJax styling */
.markdown-content .MathJax {
    font-size: 1.1em !important; /* enlarge inline math a bit */
    display: inline;
    vertical-align: baseline;
}

.markdown-content .MathJax_Display {
    margin: 1rem 0 !important;
    text-align: center;
    font-size: 1.2em !important; /* enlarge display math */
}

/* MathML styling (no external renderer) */
.markdown-content math {
    font-size: 1.1em; /* inline math slightly larger than text */
    line-height: 1.5;
}
.markdown-content math[display="block"] {
    display: block;
    margin: 1rem auto;
    text-align: center;
    font-size: 1.2em; /* display math larger */
}

/* If Markdown wraps MathML with a paragraph, still render as block */
.markdown-content p > math[display="block"] {
    display: block;
    margin: 1rem auto;
}

/* Explicit wrapper for block equations */
.markdown-content .math-block {
    margin: 1rem 0;
    text-align: center;
}
.markdown-content .math-block > math[display="block"] {
    display: inline-block; /* center within .math-block */
    margin: 0 auto;
    text-align: left;
    font-size: 1.2em; /* ensure block math enlarged in wrapper too */
}

/* Responsive type scaling */
@media (min-width: 992px) {
    .markdown-content { font-size: 1.12rem; }
}

/* Image styling */
.markdown-content img {
    max-width: 100%;
    height: auto;
    display: block;
    margin: 1rem auto;
    border-radius: 0.375rem;
}

/* Ensure any anchored element within markdown respects header offset */
.markdown-content [id] {
    scroll-margin-top: 100px;
}

/* Center images */
.markdown-content p img {
    display: block;
    margin-left: auto;
    margin-right: auto;
}

/* Handle broken images gracefully */
.markdown-content img[src=""] {
    display: none;
}

.markdown-content img:not([src]) {
    display: none;
}

/* Style for image captions */
.markdown-content img + em {
    display: block;
    text-align: center;
    font-style: italic;
    color: #666;
    margin-top: 0.5rem;
    margin-bottom: 1rem;
}

/* Code syntax highlighting */
.markdown-content .highlight {
    background-color: #f8f9fa;
    border: 1px solid #e9ecef;
    border-radius: 0.375rem;
    padding: 1rem;
    margin-bottom: 1rem;
    overflow-x: auto;
}

/* Definition lists */
.markdown-content dl {
    margin-bottom: 1rem;
}

.markdown-content dt {
    font-weight: 600;
    margin-top: 1rem;
}

.markdown-content dd {
    margin-left: 2rem;
    margin-bottom: 0.5rem;
}

/* Admonitions/callouts */
.markdown-content .admonition {
    margin: 1rem 0;
    padding: 1rem;
    border-left: 4px solid #007bff;
    background-color: #f8f9fa;
    border-radius: 0.375rem;
}

.markdown-content .admonition-title {
    font-weight: 600;
    margin-bottom: 0.5rem;
}

/* Table of contents */
.markdown-content .toc {
    background-color: #f8f9fa;
    border: 1px solid #dee2e6;
    border-radius: 0.375rem;
    padding: 1rem;
    margin-bottom: 2rem;
}

.markdown-content .toc ul {
    margin: 0;
    padding-left: 1.5rem;
}

.markdown-content .toc > ul {
    padding-left: 0;
}

/* Footnotes */
.markdown-content .footnote {
    font-size: 0.875rem;
    color: #666;
}

/* Better spacing for nested lists */
.markdown-content ul ul,
.markdown-content ol ol,
.markdown-content ul ol,
.markdown-content ol ul {
    margin-bottom: 0;
}

/* Responsive math equations */
@media (max-width: 768px) {
    .markdown-content .MathJax_Display {
        overflow-x: auto;
        overflow-y: hidden;
    }
}

/* Table of Contents Sidebar */
.toc-sidebar {
    background: #f8f9fa;
    border: 1px solid #dee2e6;
    border-radius: 0.5rem;
    padding: 1.5rem;
    max-height: 80vh;
    overflow-y: auto;
}

.toc-title {
    font-weight: 600;
    color: #495057;
    margin-bottom: 1rem;
    padding-bottom: 0.5rem;
    border-bottom: 2px solid #e9ecef;
}

.toc-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.toc-item {
    margin-bottom: 0.5rem;
}

.toc-link {
    display: block;
    padding: 0.25rem 0.5rem;
    color: #6c757d;
    text-decoration: none;
    font-size: 0.9rem;
    border-radius: 0.25rem;
    transition: all 0.2s ease;
    border-left: 3px solid transparent;
}

.toc-link:hover {
    color: #495057;
    background-color: #e9ecef;
    text-decoration: none;
}

.toc-link.active {
    color: #007bff;
    background-color: #e3f2fd;
    border-left-color: #007bff;
    font-weight: 500;
}

/* Different levels of headings */
.toc-level-1 .toc-link {
    font-weight: 600;
    font-size: 1rem;
}

.toc-level-2 .toc-link {
    font-weight: 500;
    font-size: 0.9rem;
}

.toc-level-3 .toc-link {
    font-size: 0.85rem;
}

.toc-level-4 .toc-link,
.toc-level-5 .toc-link,
.toc-level-6 .toc-link {
    font-size: 0.8rem;
    color: #868e96;
}

/* Scrollbar styling for TOC */
.toc-sidebar::-webkit-scrollbar {
    width: 4px;
}

.toc-sidebar::-webkit-scrollbar-track {
    background: #f1f3f4;
    border-radius: 2px;
}

.toc-sidebar::-webkit-scrollbar-thumb {
    background: #c1c8cd;
    border-radius: 2px;
}

.toc-sidebar::-webkit-scrollbar-thumb:hover {
    background: #a8b2b8;
}

/* Gap between TOC and content */
.toc-content-gap {
    height: 100vh; /* Full viewport height to ensure it covers the scrolling area */
    min-height: 500px; /* Minimum height for shorter content */
    background: transparent;
    position: relative;
}

/* Optional: Add a subtle visual separator */
.toc-content-gap::before {
    content: '';
    position: absolute;
    left: 50%;
    top: 20px;
    bottom: 20px;
    width: 1px;
    background: linear-gradient(to bottom,
        transparent 0%,
        #e9ecef 20%,
        #e9ecef 80%,
        transparent 100%);
    transform: translateX(-50%);
}

/* Responsive adjustments */
@media (max-width: 991.98px) {
    .toc-sidebar {
        position: static !important;
        max-height: none;
        margin-bottom: 2rem;
        top: auto !important;
        width: auto !important;
        z-index: auto !important;
        left: auto !important;
    }

    .toc-content-gap {
        position: static !important;
        height: auto !important;
        min-height: auto !important;
        top: auto !important;
        width: auto !important;
        z-index: auto !important;
        left: auto !important;
        display: none; /* Hide gap on mobile */
    }

    /* Stack layout on smaller screens */
    .col-lg-3,
    .col-lg-1,
    .col-lg-6,
    .col-lg-2 {
        width: 100%;
        max-width: 100%;
    }

    .col-lg-1,
    .col-lg-2 {
        display: none; /* Hide gap and right column on mobile */
    }
}

/* Smooth transitions for TOC positioning */
.toc-sidebar {
    transition: none; /* Disable transitions during scroll for performance */
}

/* Ensure TOC sidebar has proper layering when sticky */
.toc-sidebar.sticky-active {
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

/* Improve markdown content spacing in new layout */
.markdown-content {
    padding-right: 1rem;
}

/* Add some visual separation */
.toc-sidebar::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, #007bff, #6610f2);
    border-radius: 0.5rem 0.5rem 0 0;
}

.toc-sidebar {
    position: relative;
}

/* Navigation link font transition effects */
.nav-link {
    font-size: 1.15rem !important;
    padding: 0 !important;
    font-weight: 500;
    transition: all 0.3s ease;
    height: 100% !important;
    width: 100% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    line-height: 1.5 !important;
    text-align: center !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    position: relative !important;
}

.nav-link:hover,
.nav-link:focus,
.nav-link.dropdown-toggle.show {
    color: #F2C532 !important;
}

/* Current page navigation link styles */
.nav-link.active-nav-link {
    color: #F2C532 !important;
}

/* Navigation bar style modifications */
.navbar {
    border-bottom-left-radius: 20px;
    border-bottom-right-radius: 20px;
    height: 80px !important;
    min-height: 80px !important;
    max-height: 80px !important;
    display: flex;
    align-items: center;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1030;
}

/* Navigation bar container layout */
.navbar .container {
    display: grid !important;
    grid-template-columns: auto 1fr !important;
    gap: 15px !important;
    width: 100% !important;
    height: 100% !important;
    align-items: center;
    padding: 0 20px !important;
    max-width: none !important;
}

/* Brand area */
.navbar-brand {
    justify-self: start !important;
    height: 60px !important;
}

/* Navigation link area */
.navbar-nav {
    height: 100%;
    display: flex !important;
    gap: 15px !important;
    width: 100% !important;
    align-items: center;
    justify-content: flex-end !important;
    flex-wrap: nowrap;
    padding-right:85px;
   
}

/* Navigation link spacing and font - modified to adaptive width */
.navbar-nav .nav-item {
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: unset !important;  /* Remove fixed width */
    max-width: unset !important;  /* Remove fixed width */
    width: auto !important;       /* Change to adaptive width */
    flex-shrink: 0;
    padding: 0 8px !important;   /* Add some padding */
    
}

/* Correct dropdown menu styles */
#navbarSupportedContent .dropdown-menu {
  min-width: 150px !important; /* Set minimum width */
  width: max-content !important; /* Width adapts to content */
  max-width: 300px !important; /* Set maximum width to prevent too long */
  display: none;
  position: absolute !important;
  top: 100% !important; 
  z-index: 9999 !important;
  border: none !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  box-shadow: 0 0.5rem 1rem rgba(73, 23, 23, 0.15) !important;
  border-radius: 0.375rem !important;
  background-color: #C4C4C4 !important;
  padding: 0.5rem 0 !important;
  margin-top: 0 !important;
  white-space: nowrap; /* Prevent text wrapping */
}


/* Bootstrap automatically adds .show class when expanded to show menu */
#navbarSupportedContent .dropdown-menu.show {
  display: block !important;
}

#n#navbarSupportedContent .dropdown-item {
  display: block !important;
  padding: 0.75rem 1.5rem !important;
  color: #090101 !important;
  font-size: 1rem !important;
  line-height: 1.4 !important;
  transition: all 0.2s ease !important;
  white-space: nowrap; /* Prevent text wrapping */
  text-overflow: ellipsis; /* Show ellipsis when text is too long */
  overflow: hidden; /* Hide overflowing text */
}


/* Specifically remove width restrictions for dropdown menu parent items */
.navbar-nav .nav-item.dropdown {
  position: relative !important;
  min-width: unset !important;
  max-width: unset !important;
  width: auto !important;
}

body { 
    padding-top: 0; 
    margin: 0;
    min-height: 100vh;
}
.left-aligned { margin-left: auto; }
.bg-dark { background-color: #000000 !important; }
.bg-hero { 
    background-color: #000000; 
    height: auto;
    min-height: calc(100vh - 80px);
    margin: 80px 15px 0 15px; /* Top gives same space as fixed navigation, left and right margins */
    padding-left: 2vw;
    padding-right: 2vw;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    overflow: visible;
    border-bottom-left-radius: 30px;
    border-bottom-right-radius: 30px;
}

/* Page content area styles */
.container:not(.navbar .container) {
    padding-top: 20px;
    padding-bottom: 20px;
}

/* Ensure page content displays correctly below header */
body > .container {
    margin-top: 20px;
}

/* Make containers full width across breakpoints */
.container, .container-fluid, .container-lg, .container-md, .container-sm, .container-xl, .container-xxl {
    max-width: 100vw !important;
}

/* CALLOUT */
.bd-callout { padding:1.25rem; margin-top:1.25rem; margin-bottom:1.25rem; border:1px solid #e9ecef; border-left-width:.25rem; border-radius:.25rem }
.bd-callout h4 { margin-bottom: 1.25rem }
.bd-callout p:last-child { margin-bottom:0 }
.bd-callout code { border-radius:.25rem }
.bd-callout+.bd-callout { margin-top:-.25rem }
.bd-callout-info { border-left-color:#5bc0de }
.bd-callout-warning { border-left-color:#f0ad4e }
.bd-callout-danger { border-left-color:#d9534f }

/* footer */
footer a { color: white; font-weight: bold; text-decoration: none; }
footer a:hover { color: white; text-decoration: underline; }

/* Global cursor styles */
* {
    cursor: url('https://static.igem.wiki/teams/5607/layout/cursor1.webp') , auto;
}


/* Adjust footer layout based on image */
footer {
    position: relative;
    background-color: #000000 !important;
    padding: 40px 5vw;
}

.logo-contact{
    display: flex;
    flex-direction: row;
    align-items: center;
}

/* Logo area styles */
.logo-section {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
}

.logo-section img{
    height: 25vh;
}

/* Brand area styles */
.brand-section {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
}

.brand-section img{
    height: 13vh;
    margin-top: 15%;
}

/* Contact area styles - right side, yellow title, dashed border */
.contact-section {
    width: 80%;
    text-align: right;
    border: 2px dashed #90EE90;
    border-radius: 10px;
    padding: 20px;
    margin-left: 20%;
    background-color: rgba(0, 0, 0, 0.3);
    display: flex;
    flex-direction: column;
    justify-content: center;
    height: 100%;
}

.contact-section h4 {
    color: #F2C532 !important;
    font-weight: bold;
    margin-bottom: 15px;
    font-size: 1.3rem;
}

.contact-section p {
    margin-bottom: 2vh;
    font-size: 0.9rem;
    background: linear-gradient(135deg, #19718A 0%, #2C8C5E 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    text-align: left;
    font-weight: 500;
}

.contact-section p img {
    width: 5%;
    margin-right: 8px;
    vertical-align: middle;
}

.social-media{
    display: flex;
    flex-direction: row;
    gap: 15px;
    justify-content: center;
    align-items: center;
    margin-top: 15px;
}

.social-media img {
    width: 40px;
    height: 40px;
    object-fit: contain;
    transition: transform 0.3s ease;
}

.social-media img:hover {
    transform: scale(1.1);
}

/* SPONSORS title styles - yellow, centered */
footer h4:first-of-type {
    color: #F2C532 !important;
    font-weight: bold;
    text-align: center;
    margin-bottom: 20px;
    font-size: 1.5rem;
    margin-top: 2vh;
}

.sponsor-tip {
    font-size: 0.85rem;
    opacity: 0.9;
}

.sponsor-tip small {
    color: white !important;
}

/* Sponsors area styles */
.sponsor-item {
    transition: transform 0.3s ease;
}

.sponsor-item:hover {
    transform: translateY(-5px);
}

.sponsor-img {
    height: 15vh;
    object-fit: contain;
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
    padding: 10px;
}

.sponsor-text {
    color: white;
    font-weight: bold;
    font-size: 1rem;
    line-height: 1.2;
    padding: 10px;
    background-color: rgba(255, 255, 255, 0.1);
    border-radius: 8px;
    min-height: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.sponsor-link {
    text-decoration: none;
    color: inherit;
}

.sponsor-link:hover {
    text-decoration: none;
    color: inherit;
}

/* Copyright information styles - bottom centered */
footer hr {
    border-color: white;
    margin: 30px 0;
    opacity: 0.7;
}

footer .row:nth-last-child(2) {
    text-align: center;
    justify-content: center;
}

footer .row:nth-last-child(2) p {
    margin-bottom: 5px;
    color: white;
    background: linear-gradient(90deg, #19718A 0%, #2C8C5E 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    font-weight: bold;
}

footer .row:nth-last-child(2) a {
    color: #F2C532 !important;
    font-weight: bold;
}

footer .row:nth-last-child(2) a:hover {
    color: #FFD700 !important;
    text-decoration: underline;
}

/* Header tag image styles */
.header-tag {
    position: absolute;
    top: 80px;
    left: 10px;
    z-index: 1020; /* Below navigation bar */
    pointer-events: none; /* Allow clicks to pass through to lower elements */
}

.header-tag img {
    width: 45vw; /* 根据需要调整大小 */
    height: auto;
    display: block;
}

/* Footer内Tag图片样式 - 保持原来的样式 */
.footer-tag {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1040; /* 确保在导航栏之上 */
    pointer-events: none; /* 允许点击穿透到下层元素 */
}

.footer-tag img {
    width: 45vw; /* 根据需要调整大小 */
    height: auto;
    display: block;
}

/* Header底部Tag图片样式 */
.header-bottom-tags {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    width: 100%;
    z-index: 10;
    pointer-events: none;
}

.header-bottom-tags img {
    width: 100%;
    height: auto;
    display: block;
    position: absolute;
    bottom: 0;
    left: 0;
}

.header-bottom-tags img:first-child {
    width: 4%;
}

.header-bottom-tags img:nth-child(2) {
    width: 100%;
}

.header-bottom-tags img:last-child {
    width: 65%;
    right: 0;
    left: auto;
}

.navbar .dropdown-menu {
    /* 尺寸与定位 */
    width: 450px !important;
    min-width: 450px !important;
    max-width: 450px !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    top: 100% !important;
    margin-top: 14px !important;
    background-color: #c4c4c4;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    padding: 18px 22px !important;
    border-radius: 14px !important;
    border: none !important;
    box-shadow: 0 10px 24px rgba(0,0,0,0.35) !important;
    z-index: 1050;
}

/* Team dropdown特殊定位 - 向左偏移避免被右边缘挡住 */
.navbar .nav-item:last-child .dropdown-menu {
    left: auto !important;
    right: 0 !important;
    transform: none !important;
}

/* 展开时采用两列网格布局 */
.navbar .dropdown-menu.show {
    display: grid !important;
    grid-template-columns: 1fr 1fr;
    gap: 12px 24px;
}

/* Dropdown 每一项的展示样式 */
.navbar .dropdown-menu .dropdown-item {
    background: transparent !important;
    color: #1A1A1A !important;
    font-weight: 600;
    padding: 8px 10px !important;
    border-radius: 10px;
    white-space: normal !important;
    transition: all 0.3s ease;
    text-align: left;
    position: relative;
}

/* Active dropdown item: tint icon and text to #2C8C5E */
.navbar .dropdown-menu .dropdown-item.active,
.navbar .dropdown-menu .dropdown-item.active:hover,
.navbar .dropdown-menu .dropdown-item.active:focus {
    color: #2C8C5E !important;
    background: transparent !important;
}

/* Ensure inline <img> icons follow the active color using filters */
.navbar .dropdown-menu .dropdown-item.active img {
    filter: invert(34%) sepia(14%) saturate(1440%) hue-rotate(93deg) brightness(90%) contrast(93%);
}

/* 左列文字居左 */
.navbar .dropdown-menu .dropdown-item:nth-child(odd) {
    text-align: left;
    justify-self: start;
}

/* 右列文字居右 */
.navbar .dropdown-menu .dropdown-item:nth-child(even) {
    text-align: right;
    justify-self: end;
}

/* 悬浮效果 */
.navbar .dropdown-menu .dropdown-item:hover {
    background: rgba(255, 255, 255, 0.4) !important;
    color: #000000 !important;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

/* 点击/焦点效果 */
.navbar .dropdown-menu .dropdown-item:focus,
.navbar .dropdown-menu .dropdown-item:active {
    background: rgba(255, 255, 255, 0.6) !important;
    color: #000000 !important;
    transform: translateY(-1px);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
    outline: none;
}

/* 兼容深色导航的可读性（强制浅色下拉文字） */
.navbar-dark .navbar-nav .dropdown-menu .dropdown-item {
    color: #101010 !important;
}

/* Ensure active item color wins under dark navbar */
.navbar-dark .navbar-nav .dropdown-menu .dropdown-item.active,
.navbar-dark .navbar-nav .dropdown-menu .dropdown-item.active:hover,
.navbar-dark .navbar-nav .dropdown-menu .dropdown-item.active:focus {
    color: #2C8C5E !important;
    background: transparent !important;
}

.navbar-dark .navbar-nav .dropdown-menu .dropdown-item.active img {
    filter: invert(34%) sepia(14%) saturate(1440%) hue-rotate(93deg) brightness(90%) contrast(93%);
}

/* Header布局样式 */
.header-logo {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
}

.bg-hero .header-logo .team-logo {
    height: 25vh !important;
    max-width: 100%;
    object-fit: contain;
}

.header-team {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    position: relative;
}

.bg-hero .header-team .team-logo {
    height: 18vh !important;
    max-width: 100%;
    object-fit: contain;
}

.header-cat {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
}

.cat-image {
    height: 22vh;
    max-width: 150%;
    object-fit: contain;
}

.cat-paw {
    height: 4vh;
    max-width: 100%;
    object-fit: contain;
    position: absolute;
    top: 10%;
    right: 0;
}


.project-title h1 {
    margin: 0 !important;
    font-weight: bold !important;
    font-size: 3.5rem !important;
    background: linear-gradient(135deg, #19718A 0%, #2C8C5E 100%) !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    background-clip: text !important;
    text-shadow: none !important;
}

/* 标题文字动画效果 */
.project-title h1 span {
    display: inline-block !important;
    animation: jumpUp 600ms ease-in-out !important;
    animation-delay: var(--delay) !important;
    animation-fill-mode: both !important;
}

@keyframes jumpUp {
    0% {
        transform: translateY(30px);
        opacity: 0;
    }
    50% {
        transform: translateY(-10px);
        opacity: 1;
    }
    100% {
        transform: translateY(0);
        opacity: 1;
    }
}

.project-title p {
    margin: 0;
    font-weight: 500;
}

/* 首页隐藏第一行（包含图片的行） */
.home-page .bg-hero .row:first-child {
    display: none;
}

/* 首页隐藏标题 */
.home-page .project-title {
    display: none !important;
}

/* 首页视频容器 - 绝对居中 */
.home-page .header-video-container {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    margin: 0;
    padding: 0;
    z-index: 10;
}

/* 首页视频样式调整 */
.home-page .header-video {
    max-width: 80%;
    height: auto;
    aspect-ratio: 16/9;
    border-radius: 15px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
}

/* 通用视频样式 */
.header-video-container {
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 20px 0;
    padding: 0;
    position: relative;
    z-index: 10;
}

.header-video {
    border-radius: 15px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
    max-width: 100%;
    height: auto;
    aspect-ratio: 16/9;
    background: #000;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.header-video:hover {
    transform: scale(1.02);
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.4);
}

/* 确保视频在移动设备上响应式显示 */
@media (max-width: 768px) {
    .header-video {
        width: 100%;
        max-width: 400px;
    }
    
    .header-video-container {
        margin: 15px 0;
    }
    
    .home-page .header-video {
        max-width: 95%;
    }
}

/* 隐藏视频播放控件（通过URL参数已经设置，这里作为备用） */
.header-video::-webkit-media-controls {
    display: none !important;
}

.header-video::-webkit-media-controls-panel {
    display: none !important;
}

.header-video::-webkit-media-controls-play-button {
    display: none !important;
}

.header-video::-webkit-media-controls-start-playback-button {
    display: none !important;
}

/* 视频容器样式 */
.video-animation-container {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 70%;
    max-width: 800px;
    height: 450px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
    border-radius: 15px;
    overflow: hidden;
    z-index: 1;
    opacity: 0;
    transition: opacity 1s ease-in-out;
}

.video-animation-container img {
    width: 100%;
    height: 100%;
    border: none;
    object-fit: contain;
    animation: gifToStatic 8s ease-in-out forwards;
}

/* 动图播放完成后自动替换为静态图片的动画 */
@keyframes gifToStatic {
    0% {
        content: url('https://static.igem.wiki/teams/5607/home/logof.webp');
    }
    80% {
        content: url('https://static.igem.wiki/teams/5607/home/logof.webp');
    }
    100% {
        content: url('https://static.igem.wiki/teams/5607/home/home-logo.webp');
    }
}

/* 动画效果 */
.video-animation-container.animate {
    animation: videoMove 2.5s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
}

@keyframes videoMove {
    0% {
        top: 50%;
        left: 50%;
        width: 70%;
        height: 450px;
        opacity: 1;
        border-radius: 15px;
    }
    30% {
        opacity: 0.9;
        border-radius: 12px;
    }
    60% {
        opacity: 0.7;
        border-radius: 8px;
    }
    100% {
        top: 10px;
        left: 30px;
        width: 60px;
        height: 60px;
        opacity: 0;
        border-radius: 0;
        box-shadow: none;
    }
}

/* 首页特殊样式 - 隐藏header中的图片元素 */
.home-page .header-logo,
.home-page .header-team,
.home-page .header-cat {
    display: none !important;
}

/* 首页视频容器样式 - 保持header原有高度 */
.home-page .bg-hero {
    position: relative;
    min-height: calc(100vh - 80px);
    padding: 0;
    overflow: visible;
}

/* Header底部标签容器 - 允许内容溢出显示 */
.header-bottom-tags {
    overflow: visible !important;
}

/* 确保header容器也允许内容溢出 */
header.bg-hero {
    overflow: visible !important;
}

/* 团队名称弹出效果 */
.team-name-popup {
    position: relative; /* 参与网格布局 */
    transform: scale(0);
    z-index: 1;
    transition: transform 0.8s cubic-bezier(0.68, -0.55, 0.265, 1.55), opacity 0.4s ease;
    opacity: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.team-name-popup.show { transform: scale(1); opacity: 1; }

.team-name-popup img { max-width: 100%; max-height: 100%; height: auto; width: auto; object-fit: contain; }

/* 团队名称周围图片网格 4-3-4 布局 */
.team-grid-wrapper {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 90vw;
    max-width: 1400px;
    pointer-events: none; /* 只允许团队名/图片自身交互 */
}

.team-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    /* 显式行高，避免被压成细条 */
    --row1-h: 18vh;
    --row2-h: 26vh; /* 第二行更高 */
    --row3-h: 18vh;
    grid-template-rows: var(--row1-h) var(--row2-h) var(--row3-h);
    gap: 18px;
    align-items: center;
    grid-auto-flow: row;
}

/* 第二行高度略大，为居中团队名称让位 */
.team-grid { grid-auto-rows: 1fr; }
.team-grid > .team-name-popup { pointer-events: auto; }

.team-grid-item { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; position: relative; }
.team-grid-img { max-width: 100%; max-height: 100%; height: 100%; width: auto; object-fit: contain; border: none; border-radius: 0; pointer-events: auto; }

/* 占位块与网格项同尺寸，保持等宽等高 */
.team-name-spacer { width: 100%; height: 100%; }

/* 仅将第三行第1、4列压到底部Tag下方 */
.team-grid-item[data-slot="r3c1"],
.team-grid-item[data-slot="r3c4"] {
    position: relative;
    z-index: 5; /* 低于 .header-bottom-tags 的 z-index:10 */
}

/* 其余格子默认高于底部Tag */
.team-grid-item:not([data-slot="r3c1"]):not([data-slot="r3c4"]) {
    z-index: 20; /* 高于 .header-bottom-tags 的 z-index:10 */
}

/* 悬浮切换图片效果 */
.team-grid-item.hover-switch {
    position: relative;
    overflow: hidden;
}

.team-grid-item.hover-switch .default-img {
    opacity: 1;
    transition: opacity 0.3s ease-in-out;
}

.team-grid-item.hover-switch .hover-img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    transition: opacity 0.3s ease-in-out;
    object-fit: contain;
}

.team-grid-item.hover-switch:hover .default-img {
    opacity: 0;
}

.team-grid-item.hover-switch:hover .hover-img {
    opacity: 1;
}

/* 移除背景图，统一使用 <img> 显示 */

/* 第二行高度自定义：增加视觉留白 */
@media (min-width: 768px) {
    .team-grid { row-gap: 26px; }
    .team-grid > .team-name-popup img { width: 42vw; max-height: var(--row2-h); height: auto; }
}

@media (max-width: 767.98px) {
    .team-grid-wrapper { width: 94vw; }
    .team-grid { gap: 10px; --row1-h: 16vh; --row2-h: 22vh; --row3-h: 16vh; }
    .team-grid > .team-name-popup { grid-column: 1 / span 4; }
    .team-grid > .team-name-popup img { width: 80vw; max-height: var(--row2-h); height: auto; }
}

/* 猫爪图片在header中独立定位 */
.cat-paw-aligned {
    position: absolute !important;
    margin-bottom: -5% !important;
    left: 100px !important;
    width: 5% !important;
    height: auto !important;
    z-index: 10 !important;
    padding: 5px !important;
    border-radius: 5px !important;
}

/* Diaries page */
.diary-filter .form-select,
.diary-filter .form-control {
    background-color: #1a1a1a;
    color: #ffffff;
    border: 1px solid rgba(255,255,255,0.15);
}

.diary-filter .form-select:focus,
.diary-filter .form-control:focus {
    box-shadow: 0 0 0 0.25rem rgba(242,197,50,0.25);
    border-color: #F2C532;
}

.diary-tag {
    background: rgba(242,197,50,0.2);
    color: #F2C532;
    border: 1px dashed rgba(242,197,50,0.6);
}

.diary-sep {
    border-color: rgba(255,255,255,0.1);
    opacity: 1;
}

.diary-timeline {
    position: relative;
}

.diary-timeline::before {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 3px;
    background: linear-gradient(180deg, #2C8C5E 0%, #90EE90 100%);
    opacity: 0.9;
    z-index: 0;
}

.diary-card {
    position: relative;
    z-index: 1;
}

.diary-card {
    background: rgba(255,255,255,0.06);
    border: 1px solid rgba(255,255,255,0.12);
    border-radius: 14px;
    padding: 14px;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.diary-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 10px 20px rgba(0,0,0,0.35);
}

.diary-card-body { color: #fff; }
.diary-date { color: #F2C532; font-weight: 700; letter-spacing: 0.02em; margin-bottom: 6px; }
.diary-title { font-size: 1.1rem; margin: 0 0 6px 0; }
.diary-excerpt { color: rgba(255,255,255,0.85); margin-bottom: 10px; }
.diary-tags .badge { background: rgba(255,255,255,0.2); color: #111; }

@media (max-width: 768px) {
    .diary-title { font-size: 1rem; }
}

@media (max-width: 768px) {
    .diary-timeline::before {
        left: 24px;
        transform: none;
    }
}

/* Diary hero heading */
.diary-hero .diary-heading {
    color: #ffffff;
    font-weight: 800;
    letter-spacing: 0.08em;
    display: inline-block;
}

/* ========== Education page minimal styles ========== */
.edu-pager [data-page] { display: none; }
.edu-pager [data-page].active { display: block; }
.edu-quadrants { position: relative; display: inline-block; }
.edu-quadrants .quadrant { position: absolute; width: 40%; height: 40%; cursor: pointer; }
.edu-quadrants .q1 { top: 0; right: 0; }
.edu-quadrants .q2 { top: 0; left: 0; }
.edu-quadrants .q3 { bottom: 0; left: 0; }
.edu-quadrants .q4 { bottom: 0; right: 0; }
.edu-quadrants .quad-tip { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); background: rgba(0,0,0,0.7); color: #fff; padding: 6px 10px; border-radius: 6px; font-size: 0.9rem; }
.edu-timeline { position: relative; padding: 20px 0; }
.edu-timeline .timeline-dot { width: 14px; height: 14px; border-radius: 50%; background: #2C8C5E; border: none; margin-right: 18px; position: relative; }
.edu-timeline .timeline-card { position: relative; background: rgba(255,255,255,0.08); border: 1px solid rgba(255,255,255,0.2); padding: 10px 12px; border-radius: 10px; margin-top: 12px; max-width: 400px; }
.edu-gallery .gallery-thumb { width: 76px; height: 54px; object-fit: cover; opacity: .7; border-radius: 6px; cursor: pointer; border: 1px solid rgba(255,255,255,0.2); }
.edu-gallery .gallery-thumb:hover { opacity: 1; }
.edu-audio .audio-list { display: flex; flex-wrap: wrap; gap: 8px; }

/* Markdown-driven galleries */
.md-gallery { display: grid; grid-template-columns: repeat(auto-fill,minmax(200px,1fr)); gap: 10px; }
.md-gallery img { width: 100%; height: auto; border-radius: 8px; box-shadow: 0 2px 6px rgba(0,0,0,0.2); }

.diary-underline {
    height: 4px;
    width: 420px;
    background: linear-gradient(90deg, #19718A 0%, #2C8C5E 100%);
    border-radius: 2px;
    margin: 8px 0 18px 0;
}

.diary-intro {
    color: rgba(255,255,255,0.9);
    max-width: 820px;
}

@media (max-width: 768px) {
    .diary-underline { width: 60%; }
}








/* ===========================================
   日记页面装饰元素样式
   =========================================== */

/* 装饰性标题区域容器 */
.diary-decoration-section {
    text-align: left;              /* 内容左对齐 */
    margin: 20px 0;                /* 上下边距20px，更紧凑 */
}

/* 细线图片容器 */
.diary-thin-line-container {
    margin-top: 5px;               /* 细线上方留5px间距，更紧凑 */
    margin-bottom: 5px;  
    justify-content: flex-start;           /* 细线下方留5px间距，更紧凑 */
    position: relative;            /* 相对定位，便于子元素定位 */
}

/* 细线图片样式 - 基于提供的layout参数 */
.diary-thin-line {
    width: 478.5px;                /* 细线宽度478.5px */
    height: auto;                  /* 高度自适应，保持图片比例 */
    position: relative;            /* 相对定位 */
    top: 0px;                      /* 顶部位置0px */
    left: 60px;                    /* 左侧位置60px */
    opacity: 1;                    /* 完全不透明 */
    transform: rotate(0deg);       /* 不旋转，保持0度角 */
    margin: 0;                     /* 清除默认margin */
}

/* Diary标题和装饰点的容器 - 从细线左侧开始 */
.diary-title-with-dots {
    display: flex;                 /* 使用flexbox布局 */
    align-items: center;           /* 垂直居中对齐 */
    justify-content: flex-start;   /* 从左侧开始对齐 */
    gap: 40px;                     /* 元素间距40px，让点分开更大 */
    position: relative;            /* 相对定位 */
    left: 60px;                    /* 与细线左侧对齐，60px */
    margin-bottom: 0px;            /* 与细线的间距0px，更紧凑 */
}

/* Diary标题样式 */
.diary-title {
    font-size: 3rem;               /* 字体大小3rem，更大一些 */
    font-weight: bold;             /* 字体加粗 */
    color: #000;                   /* 黑色文字 */
    margin: 0;                     /* 清除默认边距 */
    font-family: FZLanTingHeiS-DB-GB; /* 使用自定义字体 */
    letter-spacing: 2px;           /* 字母间距2px */
}

/* 左侧装饰点 */
.diary-dot-left {
    width: 7px;                   /* 装饰点宽度7px，更小更精致 */
    height: 7px;                  /* 装饰点高度7px */
    opacity: 1;                    /* 完全不透明 */
    position: relative;            /* 相对定位 */
    top: 16px;                     /* 与文字中部对齐，向下偏移16px */
}

/* 右侧装饰点 */
.diary-dot-right {
    width: 7px;                   /* 装饰点宽度7px，更小更精致 */
    height: 7px;                  /* 装饰点高度7px */
    opacity: 1;                    /* 完全不透明 */
    position: relative;            /* 相对定位 */
    top: 16px;                     /* 与文字中部对齐，向下偏移16px */
}

/* 细线下方的描述文字 */
.diary-description {
    text-align: left;              /* 文字左对齐，符合图片样式 */
    margin-top: 0px;               /* 与细线的间距0px，紧贴细线 */
    margin-bottom: -30px;           /* 与下方内容的间距20px，更紧凑 */
    padding-left: 60px;            /* 与细线左侧对齐，60px */
    padding-right: 60px;           /* 右侧边距，与细线右侧对齐 */
}

.diary-description p {
    font-size: 1.1rem;             /* 字体大小1.1rem */
    background: linear-gradient(90deg, #2A467A 33.17%, #3B869E 100%); /* 渐变色文字 */
    -webkit-background-clip: text; /* 将背景裁剪为文字形状 */
    -webkit-text-fill-color: transparent; /* 文字透明，显示背景渐变 */
    background-clip: text;         /* 现代浏览器支持 */
    line-height: 1.6;              /* 行高1.6，提高可读性 */
    margin: 0;                     /* 清除默认边距 */
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; /* 现代无衬线字体 */
    max-width: 478.5px;            /* 最大宽度与细线长度一致，478.5px */
    word-wrap: break-word;         /* 长单词自动换行 */
    overflow-wrap: break-word;     /* 现代浏览器换行支持 */
}

/* ===========================================
   日记页面主图片样式 - 居中自适应布局
   =========================================== */

/* 主图片容器 - 灵活布局 */
.diary-main-container {
    position: relative;            /* 相对定位，便于子元素绝对定位 */
    display: block;                /* 块级元素 */
    width: 100%;                   /* 容器宽度100% */
    max-width: 1200px;             /* 最大宽度限制 */
    margin: 2px auto;             /* 上下边距50px，水平居中 */
}

/* 日记主图片的基础样式 - 灵活布局 */
.diary-main-image {
    width: 95%;                    /* 图片宽度60%，响应式 */
    max-width: 1500px;              /* 最大宽度853px */
    height: auto;                  /* 高度自适应，保持比例 */
    opacity: 0.69;                 /* 透明度0.69 */
    display: block;                /* 设置为块级元素 */
    margin: 0 auto;                /* 水平居中 */
    border: 28px solid transparent; /* 28px边框 */
}

/* 箭头图标样式 - 灵活布局 */
.diary-arrow {
    position: absolute;            /* 绝对定位，相对于主图片容器 */
    width: 400px;                  /* 箭头宽度200px */
    height: auto;                  /* 高度自适应，保持比例 */
    top: 80px;                     /* 距离顶部20px */
    right: 80px;                   /* 距离右侧50px */
    z-index: 2;                    /* 层级2，确保在图片上方 */
    opacity: 0.46;                 /* 透明度0.46 */
    transform: rotate(0deg);       /* 不旋转，保持0度角 */
}

/* 感叹号图标样式 - 灵活布局 */
.diary-exclamation {
    position: absolute;            /* 绝对定位，相对于主图片容器 */
    width: 200px;                  /* 感叹号宽度100px */
    height: auto;                  /* 高度自适应，保持比例 */
    top: -200px;                     /* 距离顶部10px */
    right: -30px;                   /* 距离右侧20px */
    z-index: 2;                    /* 层级2，确保在图片上方 */
    opacity: 1;                    /* 完全不透明 */
    transform: rotate(-21.42deg);  /* 旋转-21.42度 */
}



/* 单个位置示例（数值随意调） */
.frame-1 {  position: absolute;            /* 绝对定位，相对于主图片容器 */
    width: 650px;                  /* 箭头宽度200px */
    height: auto;                  /* 高度自适应，保持比例 */
    top: 100px;                     /* 距离顶部20px */
    left: -90px;                   /* 距离右侧50px */
    z-index: 2;                    /* 层级2，确保在图片上方 */
    opacity: 1;                 /* 透明度0.46 */
    transform: rotate(0deg);       /* 不旋转，保持0度角 */ }
    
    
    /* 左上 */
.frame-2 {  position: absolute;            /* 绝对定位，相对于主图片容器 */
    width: 400px;                  /* 箭头宽度200px */
    height: auto;                  /* 高度自适应，保持比例 */
    top: 490px;                     /* 距离顶部20px */
    right: -30px;                   /* 距离右侧50px */
    z-index: 2;                    /* 层级2，确保在图片上方 */
    opacity: 1;                 /* 透明度0.46 */
    transform: rotate(0deg);       /* 不旋转，保持0度角 */ } 
    
    /* 右上 */
.frame-3 { position: absolute;            /* 绝对定位，相对于主图片容器 */
    width: 500px;                  /* 箭头宽度200px */
    height: auto;                  /* 高度自适应，保持比例 */
    top: 800px;                     /* 距离顶部20px */
    left: -90px;                   /* 距离右侧50px */
    z-index: 2;                    /* 层级2，确保在图片上方 */
    opacity: 1;                 /* 透明度0.46 */
    transform: rotate(0deg);       /* 不旋转，保持0度角 */}/* 左下 */

.diary-black-cat{
    position: absolute;            /* 绝对定位，相对于主图片容器 */
    width: 350px;                  /* 箭头宽度200px */
    height: auto;                  /* 高度自适应，保持比例 */
    top: 1130px;                     /* 距离顶部20px */
    left: 20px;                   /* 距离右侧50px */
    z-index: 2;                    /* 层级2，确保在图片上方 */
    opacity: 1;                 /* 透明度0.46 */
    transform: rotate(0deg);   
}

.frame-4 { position: absolute;            /* 绝对定位，相对于主图片容器 */
    width: 400px;                  /* 箭头宽度200px */
    height: auto;                  /* 高度自适应，保持比例 */
    top: 1150px;                     /* 距离顶部20px */
    right: -20px;                   /* 距离右侧50px */
    z-index: 2;                    /* 层级2，确保在图片上方 */
    opacity: 1;                 /* 透明度0.46 */
    transform: rotate(0deg);       /* 不旋转，保持0度角 */}/* 右下 */

.diary-cat-paw{ position: absolute;            /* 绝对定位，相对于主图片容器 */
    width: 120px;                  /* 箭头宽度200px */
    height: auto;                  /* 高度自适应，保持比例 */
    top: 1550px;                     /* 距离顶部20px */
    right: 130px;                   /* 距离右侧50px */
    z-index: 2;                    /* 层级2，确保在图片上方 */
    opacity: 1;                 /* 透明度0.46 */
    transform: rotate(0deg);       /* 不旋转，保持0度角 */}/* 右下 */


.frame-5 {  position: absolute;            /* 绝对定位，相对于主图片容器 */
    width: 400px;                  /* 箭头宽度200px */
    height: auto;                  /* 高度自适应，保持比例 */
    top: 1500px;                     /* 距离顶部20px */
    left: -50px;                   /* 距离右侧50px */
    z-index: 2;                    /* 层级2，确保在图片上方 */
    opacity: 1;                 /* 透明度0.46 */
    transform: rotate(0deg);       /* 不旋转，保持0度角 */ } /* 正上方居中 */

.diary-white-cat {  
    position: absolute;            /* 绝对定位，相对于主图片容器 */
    width: 100px;                  /* 箭头宽度200px */
    height: auto;                  /* 高度自适应，保持比例 */
    top: 1840px;                     /* 距离顶部20px */
    right: 50px;                   /* 距离右侧50px */
    z-index: 2;                    /* 层级2，确保在图片上方 */
    opacity: 1;                 /* 透明度0.46 */
    transform: rotate(0deg);       /* 不旋转，保持0度角 */ } /* 正上方居中 */
/* 白墙铺满 + 居中容器 */
.diary-only-header{
  background: #ffffff;
  min-height: 600px;          /* 固定高度，不再使用100vh */
  height: 600px;              /* 明确设定高度 */
  width: 100vw;
  margin: 0;
  padding: 0;
  display: flex;
  justify-content: center;    /* 水平居中 */
  align-items: center;        /* 垂直居中 */
  position: relative;         /* 改为相对定位，避免与内容重叠 */
  left: 0;                    /* 完全贴左 */
  right: 0;                   /* 完全贴右 */
  gap: 60px;                  /* 书与 igem 间距，可调 */
}

/* 书：放大 + 悬停切换 */
.book-box{
  position: relative;
  width: 1000px;              /* 比原来大很多，按需再调 */
  max-width: 90vw;           /* 手机别溢出 */
  margin-top: 20vh;           /* 向下移动 */
}
.book-box img{
  width: 100%;
  transition: opacity .35s;
}
.book-front{ opacity: 1; }
.book-back{
  position: absolute;
  top: 0; left: 0;
  opacity: 0;
}
.book-box:hover .book-front{ opacity: 0; }
.book-box:hover .book-back{ opacity: 1; }

/* igem：缩小 + 右侧固定 */
.white-igem{
  position: absolute;
  right: -10px;               /* 离右边距离，可调 */
  top: 20%;
  transform: translateY(-50%);
  width: 300px;              /* 缩小尺寸，可调 */
  height: auto;
  opacity: 1;
  pointer-events: none;      /* 完全忽略悬停 */
}

/* 手机再大一点 */
@media (max-width: 576px){
  .book-box{ width: 55%; }
}
/* 响应式：屏幕小于 576px 再大一点 */
@media (max-width: 576px){
  .book-box{ width: 55%; }
}









/* ===========================================
   响应式设计 - 不同屏幕尺寸的适配
   =========================================== */

/* 中等屏幕设备 (平板横屏) - 屏幕宽度小于1200px时 */
@media (max-width: 1200px) {
    .diary-main-image {
        width: 70%;                /* 图片宽度调整为70% */
        border-width: 20px;        /* 边框宽度减少 */
    }
    
    .diary-arrow {
        width: 150px;              /* 箭头宽度150px */
        top: 15px;                 /* 调整位置 */
        right: 40px;               /* 调整位置 */
    }
    
    .diary-exclamation {
        width: 80px;               /* 感叹号宽度80px */
        top: 8px;                  /* 调整位置 */
        right: 15px;               /* 调整位置 */
    }
    
    .diary-thin-line {
        width: 70%;                /* 中等屏幕上使用70%宽度 */
        max-width: 450px;          /* 最大宽度限制 */
        left: 15%;                 /* 左侧位置使用百分比 */
        height: auto;              /* 高度自适应，保持图片比例 */
    }
    
    .diary-title-with-dots {
        left: 15%;                 /* 与细线左侧对齐，使用百分比 */
        gap: 30px;                 /* 元素间距稍小一些，但保持分开效果 */
    }
    
    .diary-description {
        padding-left: 15%;         /* 中等屏幕上使用百分比对齐 */
        padding-right: 15%;        /* 右侧边距，与细线右侧对齐 */
        margin-top: 0px;           /* 与细线的间距0px，紧贴细线 */
        margin-bottom: 15px;       /* 与下方内容的间距15px，更紧凑 */
    }
    
    .diary-description p {
        font-size: 1rem;           /* 中等屏幕上字体稍小 */
        max-width: 70%;            /* 最大宽度与细线长度一致 */
    }
}

/* 小屏幕设备 (平板竖屏/大手机) - 屏幕宽度小于768px时 */
@media (max-width: 768px) {
    .diary-main-image {
        width: 85%;                /* 图片宽度调整为85% */
        border-width: 15px;        /* 边框宽度减少 */
    }
    
    .diary-arrow {
        width: 120px;              /* 箭头宽度120px */
        top: 10px;                 /* 调整位置 */
        right: 30px;               /* 调整位置 */
    }
    
    .diary-exclamation {
        width: 60px;               /* 感叹号宽度60px */
        top: 5px;                  /* 调整位置 */
        right: 10px;               /* 调整位置 */
    }
    
    .diary-thin-line {
        width: 80%;                /* 小屏幕上使用百分比宽度 */
        max-width: 400px;          /* 最大宽度限制 */
        left: 10%;                 /* 左侧位置使用百分比 */
        height: auto;              /* 高度自适应，保持图片比例 */
    }
    
    .diary-title-with-dots {
        left: 10%;                 /* 与细线左侧对齐，使用百分比 */
        gap: 25px;                 /* 元素间距保持分开效果 */
    }
    
    .diary-description {
        padding-left: 10%;         /* 小屏幕上使用百分比对齐 */
        padding-right: 10%;        /* 右侧边距，与细线右侧对齐 */
        margin-top: 0px;           /* 与细线的间距0px，紧贴细线 */
        margin-bottom: 15px;       /* 与下方内容的间距15px，更紧凑 */
    }
    
    .diary-description p {
        font-size: 0.95rem;        /* 小屏幕上字体更小 */
        max-width: 80%;            /* 最大宽度与细线长度一致 */
    }
    
    .diary-title {
        font-size: 2.2rem;         /* 标题字体在小屏幕上稍小 */
        letter-spacing: 1px;       /* 减少字母间距 */
    }
    
    .diary-dot-left,
    .diary-dot-right {
        width: 6px;                /* 装饰点在小屏幕上更小 */
        height: 6px;
        top: 6px;                  /* 与文字中部对齐，向下偏移6px */
    }
}

/* 超小屏幕设备 (手机) - 屏幕宽度小于480px时 */
@media (max-width: 480px) {
    .diary-main-image {
        width: 95%;                /* 图片宽度调整为95% */
        border-width: 10px;        /* 边框宽度减少 */
    }
    
    .diary-arrow {
        width: 80px;               /* 箭头宽度80px */
        top: 5px;                  /* 调整位置 */
        right: 20px;               /* 调整位置 */
    }
    
    .diary-exclamation {
        width: 40px;               /* 感叹号宽度40px */
        top: 3px;                  /* 调整位置 */
        right: 5px;                /* 调整位置 */
    }
    
    /* 装饰元素在小屏幕上的调整 */
    .diary-decoration-section {
        margin: 15px 0;            /* 减少上下边距 */
    }
    
    .diary-thin-line {
        width: 80%;                /* 小屏幕上使用百分比宽度 */
        max-width: 400px;          /* 最大宽度限制 */
        left: 10%;                 /* 左侧位置使用百分比 */
        height: auto;              /* 高度自适应，保持图片比例 */
    }
    
    .diary-title-with-dots {
        left: 5%;                  /* 与细线左侧对齐，使用百分比 */
        gap: 20px;                 /* 元素间距在超小屏幕上保持分开效果 */
    }
    
    .diary-description {
        padding-left: 5%;          /* 超小屏幕上使用百分比对齐 */
        padding-right: 5%;         /* 右侧边距，与细线右侧对齐 */
        margin-top: 0px;           /* 与细线的间距0px，紧贴细线 */
        margin-bottom: 10px;       /* 与下方内容的间距10px，更紧凑 */
    }
    
    .diary-description p {
        font-size: 0.9rem;         /* 超小屏幕上字体最小 */
        max-width: 90%;            /* 最大宽度与细线长度一致 */
    }
    
    .diary-title {
        font-size: 2rem;           /* 标题字体在超小屏幕上更小 */
        letter-spacing: 1px;       /* 减少字母间距 */
    }
    
    .diary-dot-left,
    .diary-dot-right {
        width: 5px;                /* 装饰点在超小屏幕上最小 */
        height: 5px;
        top: 4px;                  /* 与文字中部对齐，向下偏移4px */
    }
    
    .diary-thin-line {
        left: 5%;                  /* 细线在超小屏幕上更靠左 */
    }
}

/* ===========================================
   循环图样式 - 基于图片的交互式循环图
   =========================================== */

/* 循环图主容器 */
.cycle-container {
    position: relative;
    width: 500px;
    height: 500px;
    margin: 50px auto;
    border-radius: 50%;
    overflow: visible;
}

/* 主图片样式 */
.cycle-main-image {
    width: 100%;
    height: 100%;
    object-fit: contain;
    border-radius: 50%;
    transition: all 0.3s ease;
    cursor: pointer;
    position: absolute;
    top: 0;
    left: 0;
}

/* 象限悬浮区域基础样式 */
.cycle-quadrant {
    position: absolute;
    width: 70%;
    height: 70%;
    cursor: pointer;
    transition: all 0.3s ease;
    z-index: 2;
}

/* 四个象限的具体位置 */
.cycle-quadrant-1 {
    top: -15%;
    right: -15%;
    /* 第一象限：Design */
}

.cycle-quadrant-2 {
    top: -15%;
    left: -15%;
    /* 第二象限：Learn */
}

.cycle-quadrant-3 {
    bottom: -15%;
    left: -15%;
    /* 第三象限：Test */
}

.cycle-quadrant-4 {
    bottom: -15%;
    right: -15%;
    /* 第四象限：Build */
}

/* 象限悬停效果 */
.cycle-quadrant:hover {
    background: rgba(255, 255, 255, 0.1);
    border-radius: 50%;
}

.cycle-quadrant-1:hover {
    border-top-right-radius: 50%;
}

.cycle-quadrant-2:hover {
    border-top-left-radius: 50%;
}

.cycle-quadrant-3:hover {
    border-bottom-left-radius: 50%;
}

.cycle-quadrant-4:hover {
    border-bottom-right-radius: 50%;
}

/* 响应式内容区域 */
.cycle-response-content {
    margin-top: 40px;
    min-height: 300px;
}

.response-section {
    display: none;
    padding: 30px;
    background: linear-gradient(135deg, #f5f7fa, #c3cfe2);
    border-radius: 15px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.1);
    animation: fadeIn 0.5s ease-in-out;
}

.response-section.active {
    display: block;
}

.response-section h3 {
    color: #2c3e50;
    margin-bottom: 20px;
    font-size: 2rem;
    text-align: center;
}

.response-section p {
    color: #34495e;
    font-size: 1.1rem;
    line-height: 1.6;
    margin-bottom: 20px;
}

.response-section ul {
    color: #2c3e50;
    font-size: 1rem;
    line-height: 1.8;
}

.response-section li {
    margin-bottom: 10px;
    padding-left: 10px;
}

/* 动画效果 */
@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* 响应式设计 */
@media (max-width: 768px) {
    .cycle-container {
        width: 400px;
        height: 400px;
        margin: 30px auto;
    }
}

@media (max-width: 480px) {
    .cycle-container {
        width: 350px;
        height: 350px;
        margin: 20px auto;
    }
}

/* Sidebar styles moved to static/sidebar.css */

/* Design page styles */
/* 整个页面白色背景 */
body.design-page {
    background-color: white !important;
}

/* 隐藏原header内容 */
.design-page header .container {
    display: none !important;
}

.design-page header .header-bottom-tags {
    display: none !important;
}

/* Design header图片 - 贴近导航栏，撑满网页 */
.design-only-header {
    position: relative;         /* 相对定位，避免与内容重叠 */
    width: 100vw;
    height: auto;
    min-height: 400px;          /* 最小高度 */
    background-color: white;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top:80px;
}

.design-header-image {
    width: 100%;
    max-width: 100vw;
    height: auto;
    display: block !important;
}
/* 1. 引入 ABeeZee 字体 */
@import url('https://fonts.googleapis.com/css2?family=ABeeZee&display=swap');

/* Introduction Section 样式 */
.design-intro-section {
    padding: 40px 5vw;
    background-color: white;
    font-family: 'ABeeZee', sans-serif; /* 整个区域用 ABeeZee */
    font-weight: normal;                /* 全部不加粗 */

}

.design-intro-content {
    max-width: 1200px; /* 增加最大宽度 */
    margin: 0;
    text-align: left;
}

/* 标题和细线的包装器 - 让它们宽度一致 */
.design-intro-title-wrapper {
    display: inline-block;
    position: relative;
}

.design-intro-title {
    font-size: 2.5rem;
    font-weight: bold;
    color: #333;
    margin: 0;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    text-align: left;
    display: block;
    white-space: nowrap; /* 防止标题换行 */
}

.design-thin-line-container {
    margin: 10px 0 20px 0;
    width: 100%; /* 与wrapper同宽 */
}

.design-thin-line {
    width: 100%;
    height: auto;
    display: block;
    margin-right: -600px;
}

/* 描述文字样式 */
.design-intro-text {
    text-align: left;
    max-width: none; /* 文字行宽更大 */
}

.design-intro-text p {
    font-size: 1.1rem;
    line-height: 1.6;
    color: #555;
    margin: 0;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    text-align: left;
}



.design-figure-image {
    width: 40%;
    max-width: 800px;
    height: auto;
    display: block;
    margin: 0 auto;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

/* LOGO Section 样式 */
.design-logo-section {
    padding: 40px 5vw;
    background-color: white;
    font-family: 'ABeeZee', sans-serif;
}

.design-logo-content {
    max-width: 1200px;
    margin: 0;
    text-align: left;
}

/* LOGO标题和下划线的包装器 */
.design-logo-title-wrapper {
    display: inline-block;
    position: relative;
    margin-bottom: 20px;
}

.design-logo-title {
    font-size: 2.5rem;
    font-weight: bold;
    color: #333;
    margin: 0;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    text-align: left;
    display: block;
    white-space: nowrap;
}

/* LOGO标题细线 */
.design-logo-thin-line-container {
    margin: 10px 0 20px 0;
    width: 100%; /* 与wrapper同宽 */
    margin-right: -600px;
}

.design-logo-thin-line {
    width: 100%;
    height: auto;
    display: block;
    margin-right: -600px;
}

/* LOGO描述文字样式 */
.design-logo-text {
    text-align: left;
    max-width: none; /* 与INTRODUCTION部分保持一致 */
}

.design-logo-text p {
    font-size: 1.1rem;
    line-height: 1.6;
    color: #555;
    margin: 0;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    text-align: left;
}




/* LOGO Section 样式 */
.design-typography-section {
    padding: 40px 5vw;
    background-color: white;
    font-family: 'ABeeZee', sans-serif;
}

.design-typography-content {
    max-width: 1200px;
    margin: 0;
    text-align: left;
}

/* typography标题和下划线的包装器 */
.design-typography-title-wrapper {
    display: inline-block;
    position: relative;
    margin-bottom: 20px;
}

.design-typography-title {
    font-size: 2.5rem;
    font-weight: bold;
    color: #333;
    margin: 0;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    text-align: left;
    display: block;
    white-space: nowrap;
}

/* LOGO标题细线 */
.design-typography-thin-line-container {
    margin: 10px 0 20px 0;
    width: 100%; /* 与wrapper同宽 */
    margin-right: -600px;
}

.design-typography-thin-line {
    width: 100%;
    height: auto;
    display: block;
    margin-right: -600px;
}

/* LOGO描述文字样式 */
.design-typography-text {
    text-align: left;
    max-width: none; /* 与INTRODUCTION部分保持一致 */
}

.design-typography-text p {
    font-size: 1.1rem;
    line-height: 1.6;
    color: #555;
    margin: 0;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    text-align: left;
}

/* graphic-design Section 标题样式 */
.design-graphic-design-section {
    padding: 40px 5vw;
    background-color: white;
    font-family: 'ABeeZee', sans-serif;
}

.design-graphic-design-content {
    max-width: 1200px;
    margin: 0;
    text-align: left;
}

/* graphic-design标题和下划线的包装器 */
.design-graphic-design-title-wrapper {
    display: inline-block;
    position: relative;
    margin-bottom: 20px;
}

.design-graphic-design-title {
    font-size: 2.5rem;
    font-weight: bold;
    color: #333;
    margin: 0;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    text-align: left;
    display: block;
    white-space: nowrap;
}

/* graphic-design标题细线 */
.design-graphic-design-thin-line-container {
    margin: 10px 0 20px 0;
    width: 100%; /* 与wrapper同宽 */
    margin-right: -600px;
}

.design-graphic-design-thin-line {
    width: 100%;
    height: auto;
    display: block;
    margin-right: -600px;
}

/* graphic-design描述文字样式 */
.design-graphic-design-text {
    text-align: left;
    max-width: none; /* 与INTRODUCTION部分保持一致 */
}

.design-graphic-design-text p {
    font-size: 1.1rem;
    line-height: 1.6;
    color: #555;
    margin: 0;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    text-align: left;
}   


/* Conclusion Section 标题样式 */
.design-conclusion-section {
    padding: 40px 5vw;
    background-color: white;
    font-family: 'ABeeZee', sans-serif;
}

.design-conclusion-content {
    max-width: 1200px;
    margin: 0;
    text-align: left;
}

/* Conclusion标题和下划线的包装器 */
.design-conclusion-title-wrapper {
    display: inline-block;
    position: relative;
    margin-bottom: 20px;
}

.design-conclusion-title {
    font-size: 2.5rem;
    font-weight: bold;
    color: #333;
    margin: 0;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    text-align: left;
    display: block;
    white-space: nowrap;
}

/* Conclusion标题细线 */
.design-conclusion-thin-line-container {
    margin: 10px 0 20px 0;
    width: 100%; /* 与wrapper同宽 */
    margin-right: -600px;
}

.design-conclusion-thin-line {
    width: 100%;
    height: auto;
    display: block;
    margin-right: -600px;
}

/* Conclusion描述文字样式 */
.design-conclusion-text {
    text-align: left;
    max-width: none; /* 与INTRODUCTION部分保持一致 */
}

.design-conclusion-text p {
    font-size: 1.1rem;
    line-height: 1.6;
    color: #555;
    margin: 0;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    text-align: left;
}




#box1{position:relative;}
.hotspot{position:absolute;display:block;cursor:pointer;}
.hotspot:hover{background:rgba(255,255,255,.2);}
#box2 img{max-width:100%;max-height:80vh;}