*{
    font-family:"Sarasa";
    margin:0;
    padding:0;
    box-sizing:border-box;
    -ms-overflow-style: none;
    scrollbar-width: none;
    /* 全站关掉「字重合成」：粗体一律用真实的 Bold 字面（见下方 @font-face），
       不让浏览器各自伪造 —— 各家合成算法差别很大（Chrome 明显更重），而且伪造的粗细
       在文字被选中时还会变。将来某处缺字面时也只是退回同族的真实字面，不会出现跨浏览器差异。 */
    font-synthesis-weight: none;
}

*::-webkit-scrollbar {
    display: none;
}


:root{
    color-scheme: dark;

    /* ==========================================================================
       控件（按钮 / 输入框）的统一设计语言
       --------------------------------------------------------------------------
       全站只用这套值，别再各写各的：
         · 默认 = 半透明底 + 1px 淡描边 + 4px 圆角 + 白色文字
         · 强调（hover / 键盘聚焦 / 选中）= 金色描边 + 淡金底 + 金色文字
       金色只当「强调态」用，不做默认态；也不引入任何新颜色。
       ========================================================================== */
    --ctl-bg: rgba(255, 255, 255, 0.04);
    --ctl-bg-strong: rgba(255, 215, 0, 0.15);     /* 强调态底色 */
    --ctl-bg-focus: rgba(255, 215, 0, 0.08);      /* 输入框聚焦底色 */
    --ctl-border: rgba(255, 255, 255, 0.12);
    --ctl-border-hover: #FFD700;
    --ctl-fg: #ffffff;
    --ctl-fg-dim: rgba(255, 255, 255, 0.5);       /* 图标按钮 / 次要按钮 */
    --ctl-fg-hover: #FFD700;
    --ctl-radius: 4px;
    --ctl-ease: 0.25s;
    --ctl-transition: color var(--ctl-ease), background-color var(--ctl-ease),
                      border-color var(--ctl-ease);
    --ctl-panel-radius: 16px;                     /* 面板 / 卡片统一圆角 */
    --ctl-err: #ff6b6b;                           /* 复用错误页那支红，仅用于失败提示 */
}

::selection {
    background-color: rgba(58, 48, 114, 0.25);
    color:#C0C0C0
}

@font-face {
    /* 正文 / 标题：Sarasa Gothic SC —— Regular / Bold / Italic 三个真实字面 */
    font-family: "Sarasa";
    src: url("../fonts/SarasaGothicSC-Regular.woff2") format("woff2");
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Sarasa";
    src: url("../fonts/SarasaGothicSC-Bold.woff2") format("woff2");
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Sarasa";
    src: url("../fonts/SarasaGothicSC-Italic.woff2") format("woff2");
    font-weight: 400;
    font-style: italic;
    font-display: swap;
}

/* ── Markdown 正文：Sarasa Mono SC（等宽）──
   四个真实字面齐全，主页面渲染出来的文章内容整体用它，
   与界面/正文的「Sarasa」（Gothic）并列成第二个字体族（见下面「Markdown 正文字体」）。 */
@font-face {
    font-family: "Sarasa Mono";
    src: url("../fonts/SarasaMonoSC-Regular.woff2") format("woff2");
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Sarasa Mono";
    src: url("../fonts/SarasaMonoSC-Bold.woff2") format("woff2");
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Sarasa Mono";
    src: url("../fonts/SarasaMonoSC-Italic.woff2") format("woff2");
    font-weight: 400;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: "Sarasa Mono";
    src: url("../fonts/SarasaMonoSC-BoldItalic.woff2") format("woff2");
    font-weight: 700;
    font-style: italic;
    font-display: swap;
}

/* ── 粗体：用真实的 Bold 字面 ──
   站内 @font-face 现在提供了真正的 Bold，所以粗体不再依赖浏览器合成、也不再用描边伪造
   （描边在文字被选中时不会被绘制，会出现"一选中就变细"）。 */
h1, h2, h3, h4, h5, h6, b, strong, th, legend, summary {
    font-weight: 700;
}

/* ==========================================================================
   界面字体：与正文同族
   --------------------------------------------------------------------------
   界面原先单独用 "Sarasa UI" 字面，等于每个页面多下一份 8 MB 的字体，
   而且因为 `*` 规则给每个元素都直接指定了 Sarasa，界面容器还得连着后代一起写
   （.tool-layout * 之类）才不会漏。
   现在去掉那份字面：导航、控件、工具页、弹窗全部沿用 `*` 给的 "Sarasa"（Gothic）。
   文章正文仍单独用等宽，见下面「Markdown 正文字体」。
   ========================================================================== */

/* ==========================================================================
   Markdown 正文字体：文章内容整篇用等宽
   --------------------------------------------------------------------------
   主页面渲染出来的文章（.markdown-body 及其所有后代）统一用 "Sarasa Mono" SC。
   和上面「界面字体」同理：`*` 规则给每个元素都直接指定了 Sarasa，
   所以必须连后代一起写（`.markdown-body *`），否则里面的元素还是 Gothic。
   文章标题 / 日期 / 分类（.article-header）和列表里的摘要卡片不在其中，
   仍是正常正文字体。
   ========================================================================== */
.markdown-body, .markdown-body * {
    font-family: "Sarasa Mono", "Sarasa", monospace;
}

html{
    /* iOS 横屏时不要自动放大字号 */
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
}

body{
    background:black;
    color:white;
    overflow-x:hidden;
    /* 超长英文 / URL 不撑破窄屏 */
    overflow-wrap:break-word;

    /* 页脚（.site-footer）要贴在视口底部：body 竖排，页面主体吃掉剩余高度。
       内容超过一屏时照常滚动，页脚自然落在文档末尾。 */
    display:flex;
    flex-direction:column;
    min-height:100vh;
}

/* 各页主体撑满页脚以上的空间。
   注意 .tool-layout 自带 display:grid（类选择器权重更高），会覆盖这里的 display。 */
body > main{
    flex:1 1 auto;
    display:flex;
    flex-direction:column;
}

/* 背景层占位：JS 启用时完全透明，真正的网格由下方 .hex-bg 画布绘制 */
.background{
    position:fixed;
    inset:0;
    background:transparent;
    z-index:-2;
}

/* 静态背景纹理：仅在 JS 未启用时显示（background.js 会移除 .no-js） */
.no-js .background{
    background-color:#0c0c0c;

    /* 密集平铺的小六边形：填充 #0c0c0c，描边 #c0c0c0 */
    /* 尖顶六边形 R=30：宽 51.9615，高 60；平铺周期 51.9615 x 90 */
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='51.9615' height='90' viewBox='0 0 51.9615 90'%3E%3Cg fill='%230c0c0c' stroke='%23c0c0c0' stroke-width='1.8' stroke-linejoin='miter'%3E%3Cpath d='M0 -60L25.9808 -45L25.9808 -15L0 0L-25.9808 -15L-25.9808 -45Z'/%3E%3Cpath d='M51.9615 -60L77.9423 -45L77.9423 -15L51.9615 0L25.9808 -15L25.9808 -45Z'/%3E%3Cpath d='M-25.9808 -15L0 0L0 30L-25.9808 45L-51.9615 30L-51.9615 0Z'/%3E%3Cpath d='M25.9808 -15L51.9615 0L51.9615 30L25.9808 45L0 30L0 0Z'/%3E%3Cpath d='M77.9423 -15L103.923 0L103.923 30L77.9423 45L51.9615 30L51.9615 0Z'/%3E%3Cpath d='M0 30L25.9808 45L25.9808 75L0 90L-25.9808 75L-25.9808 45Z'/%3E%3Cpath d='M51.9615 30L77.9423 45L77.9423 75L51.9615 90L25.9808 75L25.9808 45Z'/%3E%3Cpath d='M-25.9808 75L0 90L0 120L-25.9808 135L-51.9615 120L-51.9615 90Z'/%3E%3Cpath d='M25.9808 75L51.9615 90L51.9615 120L25.9808 135L0 120L0 90Z'/%3E%3Cpath d='M77.9423 75L103.923 90L103.923 120L77.9423 135L51.9615 120L51.9615 90Z'/%3E%3C/g%3E%3C/svg%3E");

    background-repeat:repeat;
    background-size:51.9615px 90px;
    background-position:center top;
}

/* 画布层：星云 / 星空 / 六边形网格 / 激活区特效 */
.hex-bg{
    position:fixed;
    inset:0;
    overflow:hidden;
    pointer-events:none;
    z-index:-9;
}

.hex-bg__sky,
.hex-bg__stars,
.hex-bg__grid,
.hex-bg__fx{
    position:absolute;
    inset:0;
    display:block;
    width:100%;
    height:100%;
}

/* 星云层必须不透明，作为整个背景的底 */
.hex-bg__sky{ z-index:0; background:#0a0a12 }
.hex-bg__stars{ z-index:1 }
.hex-bg__grid{ z-index:2 }
.hex-bg__fx{ z-index:3 }

.overlay{
    position:fixed;
    inset:0;

    background:
        linear-gradient(
            to bottom,
            rgba(0,0,0,0.4),
            rgba(0,0,0,0.8)
        );

    z-index:-1;
}

.navbar{
    position:fixed;
    top:0;

    width:100%;
    height:72px;

    display:flex;
    justify-content:space-between;
    align-items:center;

    padding:0 60px;

    backdrop-filter:blur(12px);

    background:
        rgba(10,10,30,0.35);

    border-bottom:
        1px solid rgba(255,255,255,0.08);

    z-index:100;
}

.logo{
    display:flex;
    align-items:center;
    gap:10px;

    font-size:24px;
    letter-spacing:4px;
}

/* ── 导航栏图标 ──
   源文件 assets/img/logo_SSS.svg 是照 1024px 画的细线图（描边只有 5/1024），
   而且描边是纯黑 —— 直接当图片贴出来，在这套近黑底上等于看不见。
   所以这里把它当 CSS mask 用：只取形状，颜色交给 currentColor，
   于是它永远与导航栏文字同色，以后改配色也不用动图。 */
.logo__mark{
    flex:0 0 auto;
    width:1.35em;
    height:1.35em;
    background-color:currentColor;

    -webkit-mask:url("../img/logo_SSS.svg") center / contain no-repeat;
            mask:url("../img/logo_SSS.svg") center / contain no-repeat;
}

nav{
    display:flex;
    gap:40px;
}

nav a{
    color:white;
    text-decoration:none;

    opacity:0.75;

    transition:0.3s;
}

nav a:hover{
    opacity:1;
    color:#FFD700;
}

/* ==========================================================================
   无缝页面切换（Seamless Navigation）
   --------------------------------------------------------------------------
   1) 跨文档 View Transitions（Chrome/Edge 126+、Safari 18.2+）
      在 global.css 里声明一次即可对全站所有页面跳转生效：
      旧页面淡出、新页面淡入，顶栏作为共享元素保持不动，
      视觉上就像"外壳常驻、内容替换"，没有生硬的白/黑闪。
      不支持该特性的浏览器会直接忽略 @view-transition 规则，退化为普通跳转。
   2) 兜底淡入（Firefox 等完全不支持 View Transitions 的内核）
      用 @supports 判定，只在这些浏览器里给 body 做一次淡入，
      避免硬切换；支持 View Transitions 的浏览器不做任何多余动画，
      以免干扰新页面快照的抓取。
   ========================================================================== */

@view-transition{
    navigation:auto;
}

/* 顶栏在每个页面位置/内容一致 → 声明为共享元素，切换时保持"钉住"不动 */
.navbar{
    view-transition-name:site-navbar;
}

@keyframes vt-fade-out{
    to{ opacity:0 }
}

@keyframes vt-fade-in{
    from{ opacity:0 }
}

/* 内容整体淡出 / 淡入 */
::view-transition-old(root){
    animation:vt-fade-out 180ms ease-in both;
}

::view-transition-new(root){
    animation:vt-fade-in 240ms ease-out both;
}

/* 顶栏不做交叉淡化：直接显示新快照，避免文字重影 */
::view-transition-group(site-navbar){
    animation-duration:0s;
}

::view-transition-old(site-navbar){
    display:none;
}

::view-transition-new(site-navbar){
    animation:none;
}

/* 尊重"减少动态效果"设置：过渡几乎瞬时完成（而不是 none，否则旧快照会盖住新页面） */
@media (prefers-reduced-motion: reduce){
    ::view-transition-old(root),
    ::view-transition-new(root),
    ::view-transition-group(*){
        animation-duration:1ms !important;
        animation-delay:0s !important;
    }
}

@supports not (view-transition-name: none){

    @keyframes page-fade-in{
        from{ opacity:0 }
        to{ opacity:1 }
    }

    body{
        animation:page-fade-in 260ms ease-out both;
    }

    @media (prefers-reduced-motion: reduce){
        body{
            animation:none;
        }
    }
}

/* ==========================================================================
   页脚：授权声明
   --------------------------------------------------------------------------
   全站共用一段。默认淡白，链接沿用站内规则（hover / 键盘聚焦才转金色）。
   贴住视口底部靠的是上面 body 与 body > main 的竖排 flex。
   ========================================================================== */
.site-footer{
    flex:0 0 auto;

    padding:18px 24px calc(18px + env(safe-area-inset-bottom, 0px));
    border-top:1px solid rgba(255,255,255,0.08);

    font-size:12px;
    line-height:1.7;
    letter-spacing:0.5px;
    text-align:center;
    color:rgba(255,255,255,0.38);
}

.site-footer__author{
    color:rgba(255,255,255,0.62);
}

.site-footer a{
    color:inherit;
    text-decoration:underline;
    text-decoration-color:rgba(255,255,255,0.25);
    text-underline-offset:2px;
    transition:var(--ctl-transition);
}

.site-footer a:hover,
.site-footer a:focus-visible{
    color:var(--ctl-fg-hover);
    text-decoration-color:currentColor;
}

/* ==========================================================================
   移动端适配（全站共用部分）
   --------------------------------------------------------------------------
   桌面样式完全不受影响：下面只在窄屏生效。
   导航栏在手机上要放得下「logo（含图标）+ 6 个链接」，所以缩小字号与间距，
   并留出刘海屏安全区；链接加大可点区域（手指点得着）。
   ========================================================================== */
@media (max-width: 768px){

    /* 手机浏览器地址栏会占掉一部分 vh：整屏高度改用 svh（页脚也算在里面） */
    body{
        min-height:100svh;
    }

    .site-footer{
        padding:14px 16px calc(14px + env(safe-area-inset-bottom, 0px));
        font-size:11px;
        line-height:1.6;
    }

    .navbar{
        height: 60px;
        padding-left: max(14px, env(safe-area-inset-left));
        padding-right: max(14px, env(safe-area-inset-right));
    }

    .logo{
        font-size: 18px;
        letter-spacing: 2px;
        gap: 8px;              /* 图标与文字的间距：窄屏收一点，给导航腾地方 */
    }

    nav{
        gap: 11px;             /* 原本 14px —— 多了「关于」一栏和 logo 图标，要收紧 */
    }

    nav a{
        font-size: 13px;
        padding: 8px 2px;
    }
}

@media (max-width: 380px){

    .navbar{
        padding-left: max(10px, env(safe-area-inset-left));
        padding-right: max(10px, env(safe-area-inset-right));
    }

    .logo{
        font-size: 16px;
        letter-spacing: 1px;
        gap: 6px;
    }

    .logo__mark{
        width: 1.1em;          /* 320px 上下再收一档，免得把导航挤到贴边 */
    }

    nav{
        gap: 7px;
    }

    nav a{
        font-size: 12px;
        letter-spacing: 0;
    }
}