@font-face {
    font-family: 'Douyin Sans';
    src: url('/font/DouyinSansBold.woff2');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

/* 基础变量 */
:root {
    /* 基础复原 */
    --base-margin: 0;
    --base-padding: 0;
    --base-list-style: none;

    /* Base Color */
    --color-white: #ffffff;
    --color-gray-fa: #fafafa;
    --color-gray-f9: #f9f9f9;
    --color-gray-f3: #f3f3f3;
    --color-gray-ec: #ececec;
    --color-gray-da: #dadada;
    --color-gray-c5: #c5c5c5;
    --color-gray-8f: #8f8f8f;
    --color-gray-50: #505050;
    --color-gray-3a: #3a3a3a;
    --color-gray-35: #353535;
    --color-gray-30: #303030;
    --color-gray-2f: #2f2f2f;
    --color-gray-2c: #2c2c2c;
    --color-gray-21: #212121;
    --color-gray-18: #181818;
    --color-gray-0d: #0d0d0d;
    --color-black: #000;

    /* Base Alpha Color */
    --color-black-alpha-00: #00000000;                  /* 0 % */
    --color-black-alpha-03: #00000003;                  /* 1 % */
    --color-black-alpha-05: #00000005;                  /* 2 % */
    --color-black-alpha-08: #00000008;                  /* 3 % */
    --color-black-alpha-0a: #0000000a;                  /* 4 % */
    --color-black-alpha-0d: #0000000d;                  /* 5 % */
    --color-black-alpha-0f: #0000000f;                  /* 6 % */
    --color-black-alpha-12: #00000012;                  /* 7 % */
    --color-black-alpha-14: #00000014;                  /* 8 % */
    --color-black-alpha-1a: #0000001a;                  /* 10 % */
    --color-black-alpha-4c: #0000004c;                  /* 30 % */
    --color-black-alpha-80: #00000080;                  /* 50 % */
    --color-black-alpha-9e: #0000009e;                  /* 62 % */
    --color-black-alpha-b3: #000000b3;                  /* 70 % */

    --color-white-alpha-00: #ffffff00;                  /* 0 % */
    --color-white-alpha-0d: #ffffff0d;                  /* 5 % */
    --color-white-alpha-1a: #ffffff1a;                  /* 10 % */
    --color-white-alpha-26: #ffffff26;                  /* 15 % */
    --color-white-alpha-33: #ffffff33;                  /* 20 % */
    --color-white-alpha-66: #ffffff66;                  /* 40 % */
    --color-white-alpha-cc: #ffffffcc;                  /* 80 % */

    /* Base Laylout */
    --desktop: 4rem;
    --pad: 3rem;
    --mobile: 1.5rem;

    /* Base Text  暂时不用 */
    --h0: 8rem;
    --h1: 4rem;
    --h2: 2rem;
    --h3: 1.5rem;
    --h4: 1.375rem;
    --h5: 1.125rem;
    --h6: 1rem;
    --text-promary: 0.875rem;
    --text-secondery: 0.75rem;
    --text-tips:0.675rem;


    /* 应用变量 */
    --lr-padding:var(--desktop);
    --line: 1px solid var(--color-black-alpha-1a);
    --text-bg:var(--color-black-alpha-4c);


    /* Surface */
    --color-surface-page: var(--color-white);
    --color-surface-button-primary: var(--color-gray-0d);
    --color-surface-button-primary-hover: var(--color-gray-21);
    --color-surface-button-primary-active: var(--color-gray-50);
    --color-surface-button-secondary: var(--color-white);
    --color-surface-button-secondary-hover: var(--color-gray-f9);
    --color-surface-button-secondary-active: var(--color-gray-fa);
    --color-surface-sidebar: var(--color-gray-f9);
    --color-surface-menu-hover:var(--color-black-alpha-0f);
    --color-surface-popup:var(--color-white);

    --color-surface-overlay: var(--color-white-alpha-66);       /* 遮罩 */

    --color-surface-icon-hover: var(--color-black-alpha-12);     /* 通用 hover（关闭按钮 / icon 按钮等）  7% */

    /* Border */
    --color-border-button-secondary: var(--color-gray-2c);

    /* Icon Color */
    --color-icon: var(--color-gray-21);

    /* Text Color */
    --color-text-primary: var(--color-gray-0d);
    --color-text-secondary: var(--color-gray-50);
    --color-text-button-primary: var(--color-white);
    --color-text-button-secondary: var(--color-gray-0d);

    /* Popup Shadow */
    --shadow-popup: 0 8px 12px 0 var(--color-black-alpha-14), 0 0 1px 0 var(--color-black-alpha-9e);

    /* 选择文字效果 */
    --select-bg: var(--color-black);
    --select-color: var(--color-white); 

}

[data-theme="dark"] {
    /* Surface 容器背景 */
    --color-surface-page: var(--color-gray-21);
    --color-surface-button-primary: var(--color-gray-f9);
    --color-surface-button-primary-hover: var(--color-gray-ec);
    --color-surface-button-primary-active: var(--color-gray-c5);
    --color-surface-button-secondary: var(--color-gray-21);
    --color-surface-button-secondary-hover: var(--color-gray-30);
    --color-surface-button-secondary-active: var(--color-gray-2c);
    --color-surface-sidebar: var(--color-gray-18);
    --color-surface-menu-hover:var(--color-white-alpha-0d);
    --color-surface-popup:var(--color-gray-35);

    --color-surface-overlay: var(--color-black-alpha-80);       /* 遮罩 */

    --color-surface-icon-hover: var(--color-white-alpha-1a);

    /* Border */
    --color-border-button-secondary: var(--color-gray-fa);

    /* Icon Color */
    --color-icon: var(--color-white);

    /* Text Color */
    --color-text-primary: var(--color-white);
    --color-text-secondary: var(--color-gray-da);
    --color-text-button-primary: var(--color-gray-0d);
    --color-text-button-secondary: var(--color-white);

     /* Popup Shadow */
    --shadow-popup: 0 8px 12px 0 var(--color-black-alpha-14), 0 0 1px 0 var(--color-black-alpha-9e);

    --line: 1px solid var(--color-white-alpha-1a);
    --text-bg:var(--color-white-alpha-66);

    /* 选择文字效果 */
    --select-bg: var(--color-white);
    --select-color: var(--color-black); 
}

/* 恢复页面的默认状态 */
*,
*::before,
*::after {
  box-sizing: border-box;
}

*::selection {
    background-color: var(--select-bg);
    color: var(--select-color);
}

a {
    text-decoration: none;      /* 移除下划线 */
    color: inherit;             /* 继承父元素的文本颜色 */
}


button, input[type="button"] {
    border: none;
    background: none;
    padding: 0;
    outline: none;              /* 移除焦点时的轮廓线 */
}

/* 全局默认样式 */
body, h1, h2, h3, h4, h5, h6, p, ul, ol, li { 
    margin: var(--base-margin); 
    padding: var(--base-padding); 
}

ul, ol { 
    list-style: var(--list-style); 
}

body {
    box-sizing: border-box;
    background-color: var(--color-surface-page);
    display: flex;
    flex-direction: column;
    min-height: 100dvh;
}

/* 基础图标颜色 */
svg {
    color: var(--color-icon);
}

/* 基础文字颜色 */
p {
    color: var(--color-text-primary);
}


/* tooltip 悬浮按钮显示文案 */
.tooltip {
    position: absolute;
    top: 110%;
    left: 50%;
    transform: translateX(-50%);
    background: #000;
    color: #fff;
    font-size: 0.75rem;
    padding: 0.3125rem 0.5rem;
    white-space: nowrap;
    opacity: 0;
    visibility: hidden;
    transition: 0.2s;
    border-radius: 0.5rem;
    pointer-events: none;
}

/* 头部 */
.header {
    display: flex;
    justify-content: space-between;
    width: 100%;
    height: 3rem;
    max-width: 90rem;
    align-items: center;
    margin: 0 auto;
    padding: 0 var(--lr-padding);
    background-color: var(--color-surface-page);
    position: fixed;
    top: 0;
    /* 固定元素居中 */
    left: 50%;
    transform: translateX(-50%);
    z-index: 999;
}

.logo {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.logo svg {
    height: 1.5rem;
    width: 1.5rem;
}

.logo p{
    font-family: 'Douyin Sans',sans-serif;
    font-size: 1rem;
}

.tryBtn {
    display: inline-flex;
    align-items: center;
    gap: 0.025rem;
    padding: 0.5rem 1rem;
    height: 2rem;
    color: var(--color-text-button-primary);
    background-color: var(--color-surface-button-primary);
    border-radius: 100rem;
    font-size: 0.75rem;
}

.tryBtn:hover {
    background-color: var(--color-surface-button-primary-hover);
}
.tryBtn:active {
    background-color: var(--color-surface-button-primary-active);
}

.tryBtn svg {
    height: 0.75rem;
    width: 0.75rem;
    /* 按钮上的svg当文字处理。颜色 */
    color: var(--color-text-button-primary);
}

.tryBtn p {
    /* 禁止折行 */
    white-space: nowrap; 
    font-size: 0.75rem ;
    color: var(--color-text-button-primary);
}

.settings {
    display: flex;
    align-items: center;
    gap: 0.025rem;
    padding: 0.5rem;
    border-radius: 100rem;
}
.settings:hover {
    background-color: var(--color-surface-icon-hover);
}
.settings:active {
    background-color: var(--color-surface-icon-hover);
}

.settings {
    position: relative;
    display: inline-flex;
    align-items: center;
}

/* hover 显示tooltip */
.settings:hover .tooltip {
    opacity: 1;
    visibility: visible;
}

/* 弹窗基础组件，包含投影、颜色、圆角、内边距、宽度 */
.popup {
    box-shadow: var(--shadow-popup);
    background-color: var(--color-surface-popup);
    border-radius: 1rem ;
    padding: 0.375rem 0.625rem;
    width: max-content;
}

/* 设置的弹窗 */
.settings-wrapper {
    position: relative;
    display: inline-block;
}

/* 弹窗 */
.settings-menu {
    position: absolute;
    top: 110%;
    right: 0;
    display: flex;
    flex-direction: column;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-10px);
    transition: 0.2s;
    z-index: 100;
}

/* 每个菜单 */
.menu-item {
    display: inline-flex;
    justify-content: center;
    height: 2.25rem;
    gap: 0.5rem;
    padding: 0.625rem 0.375rem;
    border-radius: 0.625rem;
    color: var(--color-text-primary);
    /* 小手 */
    cursor: pointer;   
}

.menu-item:hover {
    background: var(--color-surface-menu-hover);
}

/* 打开状态 */
.settings-wrapper.active .settings-menu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

/* 在桌面状态下 特殊处理 */
.desktop-only {
    display: flex;
    align-items: center;
}


.desktop-only button p {
    display: none;
}

.mobile-only {
    display: none;
    flex-direction: column;
    justify-content: flex-start;
}

.menu {
    display: flex;
    font-size: 0.875rem;
    padding: 0 1rem ;
}

.menu a {
    display: flex;
    padding: 0.5rem 1rem;
    color: var(--color-text-secondary);
}

.menu a:hover {
    color: var(--color-text-primary);
}

.menu a:active {
    color: var(--color-text-primary);
}

.actions {
    display: flex;
    gap: 0.5rem;
}



/* 移动端sidebar */
.sidebar {
    position: fixed;
    top: 0;
    right: -100%; /* 默认隐藏 */
    height: 100%;
    background: var(--color-surface-sidebar);
    transition: right 0.3s ease;
    z-index: 1000;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.sidebar.open {
    right: 0;
}

.sidebar-content {
    padding: 3rem 1rem;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    height: 100%;
}

.overlay {
    position: fixed;
    inset: 0;
    background: var(--color-surface-overlay);
    backdrop-filter: blur(1px);
    display: none;
    z-index: 10;
}

.overlay.show {
    display: block;
}


/* 第一屏 */

.hero {
    /* 自动撑满剩余空间  高度为整个屏幕减去header */
    min-height: calc(100dvh);
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 0 var(--lr-padding);
}
.hero-content {
    display: flex;
    align-items: center;
    justify-content: center;
    width: min(90rem,100%);
    margin: 0 auto;
    padding: 2rem 1rem;
    height: 100%;
    min-height: 0;
    gap: 1rem;
}

.hero-one {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    padding: 2.5rem 2rem;
}
.hero-one-title {
    font-family: 'Douyin Sans',sans-serif;
    font-size: 4rem;
    color: var(--color-text-primary);
}

.hero-one-content {
    font-size: 1.5rem;
    color: var(--color-text-secondary);
}

.hero-two {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100vmin;
    height: 100vmin;
}
.hero-two img {
    height: 100%;
    width: 100%;
    max-width: 60%;
    max-height: 60%;
    object-fit: contain;
}


.culture {
    display: flex;
    gap: 1rem;
    max-width: 90rem;
    width: 100%;
    margin: 0 auto;
    padding: 0 var(--lr-padding);
}

.cultureLeft {
    flex: 7;   /* 70% */
}

.cultureRight {
    flex: 3;   /* 30% */
    display: flex;
    flex-direction: column;
    width: 100%;
    height: auto;
    gap: 1rem;
}
.left-inner {
    /* 吸顶 */
    position: sticky;
    top: 3.025rem;
    width: 100%;
    height: 100%;
    max-height: 35rem;
    min-height: 20rem;
    border-radius: 1rem;
    border: var(--line);
    display: flex;
    gap: 1.5rem;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}
.left-inner-title {
    font-family: 'Douyin Sans',sans-serif;
    font-size: 4rem;
    color: var(--color-text-primary);
    padding: 0 1rem;
    text-align: center;
}
.left-inner-content {
    font-size: 1.5rem;
    padding: 0 1rem;
    text-align: center;
    color: var(--color-text-secondary);
}
.right-card {
    height: auto;
    width: 100%;
    border-radius: 1rem;
    border: var(--line);
    display: flex;
    flex-direction: column;
}
.card-up {
    display: flex;
    width: 100%;
    aspect-ratio: 4 / 3;
    align-items: center;
    justify-content: center;
    font-size: 8rem;
    font-weight: 900;
    color: var(--text-bg);
    border-bottom: var(--line);
}
.card-down {
    padding: 1.5rem;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}
.card-title {
    width: 100%;
    font-size: 1.5rem;
    font-weight: 500;
}
.card-content {
    font-size: 1.125rem;
    color: var(--color-text-secondary);
}

.news {
    /* 临时 */
    height: auto;
    width: 100%;
    max-width: 90rem;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    padding: var(--lr-padding);
}

.news-menu {
    display: flex;
    justify-content: space-between;
    padding: 0 0 2rem;
    align-items: center;
    /* 包含下级的文字及图标 */
    color: var(--color-text-primary);
}

.news-menu p {
    /* 模块标题 */
    height: 2.5rem;
    font-size: 1.375rem;
    align-items: center;
    font-weight: 800;
}
.news-more {
    display: flex;
    justify-content: center;
    align-items: center;
    width: auto;
    align-items: center;
    height: 2.5rem;
    cursor: pointer; 
}

.news-more p{
    /* 禁止折行 */
    color: var(--color-text-secondary);
    font-weight: 400;
    white-space: nowrap; 
    height: auto;
    align-items: center;
    font-size: 0.875rem;
}
.news-more svg {
    height: 0.875rem;
    width: 0.875rem;
    color: var(--color-text-secondary);
}

.news-content {
    display: grid;
    /* 电脑端 2 列 */
    grid-template-columns: repeat(2, 1fr);
    gap: 2rem;
}
.news-item {
    cursor: pointer;  
    display: flex;
    flex-direction: row;
    gap: 2rem;
    min-width: 0;
    overflow: hidden;
}
.news-item-left {
    display: flex;
    /* 禁止被压缩 */
    flex-shrink: 0;
    justify-content: center;
    align-items: center;
    height: 12rem;
    width: 12rem;
    border-radius: 1rem;
    border: var(--line);
    font-size: var(--text-promary);
    color: var(--color-text-primary);
}
.news-item-right {
    height: 12rem;
    overflow: hidden;
    width: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 1rem;
}
.news-item-title {
    font-size: var(--h5);
    color: var(--color-text-primary);
    font-weight: 500;
}
.news-item-tips {
    display: flex;
    flex-direction: row;
    gap: 0.75rem;
}
.news-type {
    font-size: var(--text-promary);
    color: var(--color-text-primary);
    font-weight: 500;
}
.news-date {
    font-size: var(--text-promary);
    color: var(--color-text-secondary);
    font-weight: normal;
}

/* Footer 页脚样式（和头部统一风格）*/

.footer {
  width: 100%;
  max-width: 90rem;
  margin: 4rem auto 0;
  padding: 2rem var(--lr-padding);
  border-top: var(--line);
  background-color: var(--color-surface-page);
}

.footer-container {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.footer-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.footer-logo {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.footer-logo svg {
  width: 1.5rem;
  height: 1.5rem;
  color: var(--color-icon);
}

.footer-logo p {
  font-size: 1rem;
  font-weight: 600;
  color: var(--color-text-primary);
  margin: 0;
}

.footer-links {
  display: flex;
  gap: 1.5rem;
}

.footer-links a {
  font-size: 0.875rem;
  color: var(--color-text-secondary);
  transition: color 0.2s;
}

.footer-links a:hover {
  color: var(--color-text-primary);
}

.footer-bottom {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    text-align: center;
}

.copyright {
  font-size: 0.8rem;
  color: var(--color-text-secondary);
  margin: 0;
}

/* ============================================== */
/* 新闻详情页 —— 统一可视宽度 + 样式 */
/* ============================================== */
.news-detail-page {
  max-width: 90rem;
  width: 100%;
  margin: 6rem auto 4rem;
  padding: 0 var(--lr-padding);
  flex: 1;
}

.news-detail-header {
  max-width: 50rem;
  margin: 0 auto 2rem;
}

#news-title {
  font-size: var(--h2);
  font-weight: 700;
  color: var(--color-text-primary);
  margin: 0 0 0.5rem 0;
  line-height: 1.3;
}

.news-date {
  font-size: var(--text-promary);
  color: var(--color-text-secondary);
}

.article-content {
  max-width: 50rem;
  margin: 0 auto;
  font-size: var(--text-promary);
  line-height: 1.7;
  color: var(--color-text-primary);
}

.article-content p {
  margin-bottom: 1.2rem;
}

.article-content h1,
.article-content h2,
.article-content h3 {
  margin: 2rem 0 1rem;
  font-weight: 700;
}

.article-content ul {
  padding-left: 1.5rem;
  margin: 1rem 0;
}


/* 响应式 */

/* 平板端监听 */
/* 中屏 80rem 1280 */
@media (max-width: 80rem) {
    /* 引用变量 */
    :root {
        --lr-padding:var(--pad);
    }

    .hero-content {
    height: 100%;
    flex-direction: column;
    gap: 4rem;
    justify-content: center;
    align-items: center;
    min-height: 0;
    }
    .hero-one {
        text-align: center;
        padding: 6rem 2rem 0 2rem;
    }
    .hero-one-title {
        font-size: 3rem;
    }
    .hero-one-content {
        font-size: 1.25rem;
    }
    .hero-two {
        padding: 0 3rem;
        height: auto;
        width: 50%;
    }
    .culture {
        flex-direction: column;
    }
    .cultureRight {
        flex-direction: row;
    }
    .left-inner-title {
    font-size: 3rem;
    }
    .left-inner-content {
        font-size: 1.2rem;
    }
    .news-content {
    display: grid;
    /* 平板端 1 列 */
        grid-template-columns: repeat(1, 1fr);
    }
}


/* 移动端监听 */
/* 小屏 50rem 800px */
@media (max-width: 50rem) {
    /* 引用变量 */
    :root {
        --lr-padding:var(--mobile);
    }
    .desktop-only {
        display: none;
    }

    .mobile-only {
        display: flex;
    }

    .culture {
        flex-direction: column;
    }

    .cultureLeft, .cultureRight {
        flex: none;
        width: 100%;
    }
    
    .left-inner {
        position: static; /* ❗关闭sticky */
    }
    .hero-one {
        text-align: center;
        padding: 5rem 1rem 0 1rem;
    }
    .hero-one-title {
        font-size: 2.5rem;
    }
    .hero-one-content {
        font-size: 1rem;
    }
    .hero-two {
        padding: 0 1.5rem;
        height: auto;
        width: 100%;
        max-width: 70%;
    }
    .culture {
        flex-direction: column;
    }
    .cultureRight {
        flex-direction: column;
    }
    .left-inner-title {
    font-size: 2rem;
    }
    .left-inner-content {
        font-size: 1rem;
    }
    .footer-top {
    flex-direction: column;
    gap: 1rem;
    text-align: center;
    }
    .footer-bottom {
    display: flex;
    flex-direction: column;
    }
    .news-detail-page {
        margin-top: 4rem;
    }
    .news-detail-page {
        margin-top: 4rem;
    }
    #news-title {
        font-size: var(--h3);
    }
    /* 新闻类型和时间的排列方式 */
    .news-item-tips {
        display: flex;
        flex-direction: column;
        gap: 0rem;
    }
}