@font-face {
    font-family: "Pixel CN";
    src: url("/fonts/HYPixel9pxJ-2.woff2") format("woff2"),
        url("/fonts/HYPixel9pxJ-2.ttf") format("truetype");
    font-display: swap;
}

@font-face {
    font-family: "Alpha Sector";
    src: url("/fonts/AlphaSector.woff2") format("woff2"),
        url("/fonts/AlphaSector.otf") format("opentype");
    font-display: swap;
}

:root {
    --hud-s: 1;
}

.page-hud {
    --hud-ink: #eaf3ff;
    --hud-line-w: 1px;
    --hud-dash: 26 9 5 7 42 12 13 8 7 6;
    --hud-line-a: 0.42;
    --hud-halo-w: 6px;
    --hud-halo-a: 0.05;
    --hud-run-len: 46;
    --hud-run-dur: 12s;
    --hud-run-total: 3200;
    --hud-glow: 0;

    --hud-cover: rgba(3, 3, 8, 0.92);

    --hud-col: 5vw;
    --hud-pad: clamp(8px, 0.7vw, calc(14px * var(--hud-s, 1)));
    --hud-top-a: 6%;
    --hud-top-b: 9%;
    --hud-ledge: 30%;
    --hud-notch: 12%;
    --hud-band: 94%;
    --hud-band-x: 30%;
    --hud-ink-dim: rgba(234, 243, 255, 0.62);

    --hud-logo-size: clamp(20px, 2.0vw, 40px);
    --hud-logo-x: 56.8%;
    --hud-logo-y: 2.4%;
    --hud-line-soft: rgba(234, 243, 255, 0.22);
    --hud-line-on: rgba(234, 243, 255, 0.6);

    --hud-ctl-fs: calc(11px * var(--hud-s, 1));
    --hud-ctl-ls: 0.16em;
    --hud-val-fs: calc(12px * var(--hud-s, 1));
    --hud-fader-len: clamp(72px, 11vh, calc(118px * var(--hud-s, 1)));
    --hud-rail-w: calc(5px * var(--hud-s, 1));
    --hud-rail: rgba(234, 243, 255, 0.22);
    --hud-thumb: calc(20px * var(--hud-s, 1));
    --hud-btn-h: clamp(30px, calc(32px * var(--hud-s, 1)), 56px);

    --hud-font: "Alpha Sector", "Pixel CN", "PingFang SC", "Microsoft YaHei",
        "Noto Sans SC", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    --hud-smooth: none;

    position: fixed;
    inset: 0;
    z-index: 200;
    pointer-events: none;
    color: var(--hud-ink);
    font-family: var(--hud-font);
    -webkit-font-smoothing: var(--hud-smooth);
    -moz-osx-font-smoothing: var(--hud-smooth);
}

.page-hud__frame {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    display: block;
    overflow: visible;
    pointer-events: none;
}

.page-hud__band {
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100vh;
    height: 100vh;
    display: block;
    overflow: visible;
    pointer-events: none;
}

.hud-face {
    fill: rgba(234, 243, 255, 0.05);
    stroke: rgba(234, 243, 255, 0.3);
    stroke-width: 1px;
    vector-effect: non-scaling-stroke;
}

.hud-fill {
    fill: var(--hud-cover);
    stroke: none;
    pointer-events: none;
}

.hud-halo,
.hud-line,
.hud-run {
    fill: none;
    stroke: var(--hud-ink);
    stroke-linejoin: miter;
    vector-effect: non-scaling-stroke;
}

.hud-halo {
    stroke-width: var(--hud-halo-w);
    stroke-linecap: round;
    opacity: calc(var(--hud-halo-a) + var(--hud-glow) * 0.1);
}

.hud-line {
    stroke-width: var(--hud-line-w);
    stroke-dasharray: var(--hud-dash);
    opacity: calc(var(--hud-line-a) + var(--hud-glow) * 0.4);
}

.hud-run {
    stroke: #ffffff;
    stroke-width: 1.6px;
    stroke-linecap: round;
    stroke-dasharray: var(--hud-run-len) 2000;
    opacity: calc(0.45 + var(--hud-glow) * 0.45);
    animation: hud-run var(--hud-run-dur) linear infinite;
}

/* ★ 左侧竖带(band)的路径只有约 129 用户单位长,与右侧大框共用 3200 的
   dashoffset 行程会让它的流光只走过一小段就被拉回起点 —— 表现为
   "右侧走线过程中,左侧开头突然冒出一小段流光然后消失"。给它单独一个
   行程(与自身路径长度匹配),再整体错开半拍,两侧不再同步也不互相截断。 */
.hud-run.hud-band-run {
    --hud-run-total: 150;
    animation-delay: -6s;
}

@keyframes hud-run {
    from { stroke-dashoffset: var(--hud-run-total); }
    to { stroke-dashoffset: 0; }
}

.hud-logo {
    position: absolute;
    left: var(--hud-logo-x);
    top: var(--hud-logo-y);
    pointer-events: none;
    font-size: var(--hud-logo-size);
    letter-spacing: 0.08em;
    line-height: 1.05;
    color: #f4f8ff;
    white-space: nowrap;
    user-select: none;
    text-shadow: 0 0 24px rgba(234, 243, 255, 0.28);
}

.hud-logo:hover {
    color: #ffffff;
}

.hud-search {
    position: absolute;
    right: 9%;
    top: 1.4%;
    width: min(19%, calc(320px * var(--hud-s, 1)));
    pointer-events: auto;
}

.hud-search .search-box input {
    width: 100%;
    height: clamp(26px, 3vh, calc(34px * var(--hud-s, 1)));
    padding: 0 2.2rem 0 2rem;
    border: 1px solid var(--hud-line-soft);
    border-radius: 4px;
    background: rgba(234, 243, 255, 0.04);
    color: var(--hud-ink);
    font-family: var(--hud-font);
    font-size: calc(12px * var(--hud-s, 1));
    letter-spacing: 0.06em;
}

.hud-search .search-box input::-webkit-search-cancel-button,
.hud-search .search-box input::-webkit-search-decoration {
    -webkit-appearance: none;
    appearance: none;
}

.hud-search__clear {
    position: absolute;
    right: 4px;
    top: 50%;
    transform: translateY(-50%);
    width: calc(22px * var(--hud-s, 1));
    height: calc(22px * var(--hud-s, 1));
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: 0;
    border-radius: 3px;
    background: none;
    color: rgba(234, 243, 255, 0.66);
    cursor: pointer;
}

.hud-search__clear:hover {
    color: var(--hud-ink);
    background: rgba(234, 243, 255, 0.1);
}

.hud-search__clear[hidden] {
    display: none;
}

.hud-search__clear svg {
    width: calc(12px * var(--hud-s, 1));
    height: calc(12px * var(--hud-s, 1));
    display: block;
}

.hud-search .search-box input::placeholder {
    color: rgba(234, 243, 255, 0.4);
}

.hud-search .search-box input:focus {
    width: 100%;
    border-color: var(--hud-line-on);
    background: rgba(234, 243, 255, 0.07);
}

.hud-search .search-results {
    right: 0;
    width: min(420px, 60vw);
    background: rgba(8, 12, 22, 0.96);
    border: 1px solid var(--hud-line-soft);
    border-radius: 6px;
    backdrop-filter: blur(8px);
}

.hud-acts {
    position: absolute;
    right: var(--hud-pad);
    top: 0.4%;
    display: grid;
    grid-template-columns: auto auto;
    gap: clamp(6px, 0.7vh, 11px);
    justify-items: center;
    align-items: center;
    pointer-events: auto;
}

.hud-act[data-hud-act="md"] { grid-area: 1 / 1; }
.hud-act[data-hud-act="github"] { grid-area: 1 / 2; }
.hud-act[data-hud-act="wechat"] { grid-area: 2 / 2; }

.hud-act {
    width: clamp(42px, 5vh, 64px);
    height: clamp(42px, 5vh, 64px);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: 1px solid var(--hud-line-soft);
    border-radius: 6px;
    background: rgba(234, 243, 255, 0.05);
    color: rgba(234, 243, 255, 0.9);
    cursor: pointer;
    transition: background-color 0.16s ease, border-color 0.16s ease, color 0.16s ease;
}

.hud-act:hover,
.hud-act[aria-expanded="true"] {
    background: rgba(234, 243, 255, 0.16);
    border-color: var(--hud-line-on);
    color: #ffffff;
}

/* 按压反馈:下压 1px + 底色加深(按住读取头的手感) */
.hud-act:active {
    background: rgba(234, 243, 255, 0.22);
    transform: translateY(1px);
}

.hud-act svg {
    width: 52%;
    height: 52%;
    display: block;
}

.hud-toast {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    padding: 5px 9px;
    border: 1px solid var(--hud-line-on);
    border-radius: 4px;
    background: rgba(8, 12, 22, 0.96);
    backdrop-filter: blur(8px);
    color: var(--hud-ink);
    font-size: calc(11px * var(--hud-s, 1));
    letter-spacing: 0.06em;
    white-space: nowrap;
    z-index: 2;
}

.hud-toast[hidden] {
    display: none;
}

/* ============================================================
   右下角三盆花(线稿装饰)
   —— 坐在 HUD 右侧列(hud-ctl)的正上方、正文区右缘之外:
      right ≈ 控制列的左边线,left 用 main 右缘 + 余量兜住,
      高度 ≤ 控制列顶(约视口 80%),不越进 nav / 目录页。
   线条走 HUD 边框同一套 --hud-line-soft / --hud-line-on,
   亮模式 shell.css 已把这两个变量翻成墨色,自动跟随。
   ============================================================ */
.hud-plants {
    position: fixed;
    /* 盆底精确落在 HUD 底边框线上(band 线在底部 2vh≈14px 处,
       植物构图里盆底在 viewBox y=588/602 → 用 bottom 让它压线)。 */
    /* 主内容右缘(约 1016)到右侧控制列(约 1202)之间的空带:
       花坐在空带中部、HUD 底边框折线(y=94 → 6vh)上,不贴边、不撞控制列。 */
    right: 240px;
    bottom: 5vh;   /* 盆底精确坐在 HUD 框的底边折线上(frame 路径 y=94 → 离底 6%) */
    height: min(36vh, 300px);
    width: auto;
    aspect-ratio: 472 / 572;
    opacity: 0.9;
    pointer-events: none;
    z-index: 1;
    transition: opacity 0.2s ease;
}

/* 矮视口(如 1280x720)下盆栽会压到评论区表单——把发送按钮
   从盆栽底下挪开:表单右侧留出一条空带,按钮不再被花挡住
   (盆栽 fixed right:240px 起、宽约 210px,覆盖右缘 240~450px 一带)。 */
@media (max-width: 1440px) and (max-height: 820px) {
    .cmt-form__row {
        padding-right: 210px;
    }
}

.hud-plants__ink {
    stroke: var(--hud-line-on, rgba(234, 243, 255, 0.55));
    stroke-width: 2.4;
    vector-effect: non-scaling-stroke;
}

.hud-plants__leaf {
    stroke: var(--hud-line-on, rgba(234, 243, 255, 0.55));
    stroke-width: 2;
    vector-effect: non-scaling-stroke;
}

.hud-plants__core {
    stroke-width: 2;
}

/* 鼠标扫过右侧列时,花稍亮一点(只动透明度,克制) */
.page-hud:hover .hud-plants {
    opacity: 1;
}

/* ============================================================
   盆栽互动(hud-plants.js)
   —— 摇摆:每盆植株包在 .hud-plants__sway 里,绕【自己盆底】转,
      盆身不动(之前整组动导致盆跟着歪)。
   —— 抖动:只挂在【花盆】的可见组上(hud-plants__front),
      之前挂在透明热区 <g> 上,动画把热区的 hit path 边缘描了出来,
      用户看到的就是那个"黑框"。
   —— 热区:fill/stroke 全空 + pointer-events:all 按几何命中;
      不给 tabindex/role —— 可聚焦元素会画焦点矩形,同样是黑框来源。
   ============================================================ */
.hud-plants__sway--left  { transform-origin: 316px 588px; transform-box: view-box; }
.hud-plants__sway--right { transform-origin: 581px 588px; transform-box: view-box; }
.hud-plants__sway--mid   { transform-origin: 417px 534px; transform-box: view-box; }

/* 风:全局检测鼠标速度/方向(hud-plants.js),快扫过时起风。
   风向类 wind-r/wind-l 决定叶子先朝哪边让,--wind-amp 是摆幅上限
   (速度越快越大,JS 写入)。三盆植株一起摆,各自绕盆底。 */
.hud-plants.is-breeze .hud-plants__sway {
    animation: hud-plants-sway 1.5s ease-out 1;
}

.hud-plants.is-breeze.wind-r .hud-plants__sway {
    animation-name: hud-plants-sway-r;
}

.hud-plants.is-breeze.wind-l .hud-plants__sway {
    animation-name: hud-plants-sway-l;
}

@keyframes hud-plants-sway-r {
    0%, 100% { transform: rotate(0deg); }
    22%      { transform: rotate(var(--wind-amp, 1.2deg)); }
    58%      { transform: rotate(calc(var(--wind-amp, 1.2deg) * -0.55)); }
    82%      { transform: rotate(calc(var(--wind-amp, 1.2deg) * 0.22)); }
}

@keyframes hud-plants-sway-l {
    0%, 100% { transform: rotate(0deg); }
    22%      { transform: rotate(calc(var(--wind-amp, 1.2deg) * -1)); }
    58%      { transform: rotate(calc(var(--wind-amp, 1.2deg) * 0.55)); }
    82%      { transform: rotate(calc(var(--wind-amp, 1.2deg) * -0.22)); }
}

/* 受击:点击哪盆就抖哪盆的【可见组本身】—— is-shake 由 JS 直接
   挂在 .hud-plants__ink / .hud-plants__front / .hud-plants__leaf 上,
   选择器必须对着元素自身,不能用 [data-plant] 后代链(热区已废弃)。 */
.hud-plants__ink.is-shake,
.hud-plants__front.is-shake,
.hud-plants .hud-plants__leaf.is-shake {
    animation: hud-plants-jolt 0.45s cubic-bezier(0.36, 0.07, 0.19, 0.97);
}

@keyframes hud-plants-jolt {
    0%, 100% { transform: translate(0, 0); }
    20%      { transform: translate(-1.5px, 0); }
    40%      { transform: translate(1.5px, -1px); }
    60%      { transform: translate(-1px, 0); }
    80%      { transform: translate(1px, 0); }
}

/* 花芯双色:点击中盆花芯在透/实两态间切 */
.hud-plants__core {
    fill: transparent;
    transition: fill 0.25s ease;
}

.hud-plants__core.is-alt {
    fill: var(--hud-line-on, rgba(234, 243, 255, 0.6));
}

/* 热区方案:整棵 svg 接事件,点击用几何换算分盆(hud-plants.js)。
   之前 fill/stroke 全空的透明热区 path 在部分环境命中不了 ——
   HTML 元素级 pointer-events 才是百分百可靠的。 */
.hud-plants {
    pointer-events: auto;
}

.hud-plants__hot {
    display: none; /* 旧热区已废弃,不再渲染(模板里也删,这里兜底) */
}

@media (prefers-reduced-motion: reduce) {
    .hud-plants.is-breeze .hud-plants__sway,
    .hud-plants__ink.is-shake,
    .hud-plants__front.is-shake,
    .hud-plants .hud-plants__leaf.is-shake {
        animation: none;
    }
    .hud-plants__core { transition: none; }
    .hud-plants { transition: none; }
}

@media (max-height: 780px) {
    .hud-plants {
        height: min(30vh, 240px);
    }
}

.hud-nav {
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    width: var(--hud-col);
    display: flex;
    flex-direction: column;
    gap: clamp(6px, 1.1vh, 14px);
    pointer-events: auto;
}

.hud-nav__item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    padding: 0.75em 0.2em;
    color: var(--hud-ink-dim);
    font-size: clamp(12px, 0.86vw, calc(16px * var(--hud-s, 1)));
    letter-spacing: 0.1em;
    text-decoration: none;
    border: 1px solid transparent;
    border-radius: 5px;
    transition: color 0.16s ease, background-color 0.16s ease, border-color 0.16s ease;
}

.hud-nav__item:hover,
.hud-nav__item:focus-visible {
    color: var(--hud-ink);
    background: rgba(234, 243, 255, 0.06);
    border-color: var(--hud-line-soft);
    text-decoration: none;
}

.hud-nav__item.is-current {
    color: var(--hud-ink);
    border-color: var(--hud-line-on);
}

.hud-nav__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: calc(22px * var(--hud-s, 1));
    height: calc(22px * var(--hud-s, 1));
    opacity: 0.95;
}

.hud-nav__icon svg {
    width: calc(22px * var(--hud-s, 1));
    height: calc(22px * var(--hud-s, 1));
    display: block;
}

.hud-nav__name {
    white-space: nowrap;
}

.hud-ctl {
    position: absolute;
    right: 0;
    bottom: 1.2%;
    top: calc(50% + var(--hud-nav-h, 240px) / 2 + 14px);
    bottom: auto;
    width: var(--hud-col);
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
    pointer-events: auto;
}

:root {
    --hud-nav-h: 240px;
}

@media (max-height: 780px) {
    .page-hud {
        --hud-fader-len: clamp(48px, 7vh, calc(88px * var(--hud-s, 1)));
    }

    .hud-ctl {
        gap: 5px;
    }

    .hud-fader {
        gap: 2px;
    }

    .hud-theme {
        height: calc(26px * var(--hud-s, 1));
    }
}

.hud-faders {
    display: flex;
    flex-direction: row;
    justify-content: center;
    gap: 4px;
}

.hud-fader {
    flex: 1 1 0;
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 5px;
}

.hud-fader__body {
    display: flex;
    align-items: center;
    justify-content: center;
    height: var(--hud-fader-len);
}

.hud-fader__label {
    font-size: var(--hud-ctl-fs);
    letter-spacing: var(--hud-ctl-ls);
    color: var(--hud-ink-dim);
    white-space: nowrap;
}

.hud-fader__val {
    font-size: var(--hud-val-fs);
    color: var(--hud-ink-dim);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.hud-range {
    -webkit-appearance: none;
    appearance: none;
    width: var(--hud-fader-len);
    height: var(--hud-thumb);
    margin: 0;
    transform: rotate(-90deg);
    background: var(--hud-rail) center / 100% var(--hud-rail-w) no-repeat;
    border-radius: 3px;
    outline: none;
    cursor: pointer;
}

.hud-range--hue {
    background-image: linear-gradient(to right,
        hsl(0, 78%, 58%) 0%, hsl(60, 78%, 58%) 17%, hsl(120, 78%, 58%) 33%,
        hsl(180, 78%, 58%) 50%, hsl(240, 78%, 58%) 67%, hsl(300, 78%, 58%) 83%,
        hsl(360, 78%, 58%) 100%);
    background-repeat: no-repeat;
    background-position: center;
    background-size: 100% var(--hud-rail-w);
    opacity: 0.85;
}

.hud-range::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: var(--hud-thumb);
    height: var(--hud-thumb);
    border-radius: 50%;
    background-color: rgba(10, 14, 22, 0.88);
    background-repeat: no-repeat;
    background-position: center;
    background-size: 72% 72%;
    border: 1.5px solid rgba(234, 243, 255, 0.85);
    box-shadow: 0 0 0 3px rgba(234, 243, 255, 0.08);
    cursor: grab;
}

.hud-range::-moz-range-thumb {
    width: var(--hud-thumb);
    height: var(--hud-thumb);
    border-radius: 50%;
    background-color: rgba(10, 14, 22, 0.88);
    background-repeat: no-repeat;
    background-position: center;
    background-size: 72% 72%;
    border: 1.5px solid rgba(234, 243, 255, 0.85);
    cursor: grab;
}

.hud-range--vol::-webkit-slider-thumb {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23eaf3ff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolygon points='11 5 6 9 2 9 2 15 6 15 11 19 11 5'/%3E%3Cpath d='M15.6 8.6a5 5 0 0 1 0 6.8'/%3E%3C/svg%3E");
}

.hud-range--vol::-moz-range-thumb {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23eaf3ff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolygon points='11 5 6 9 2 9 2 15 6 15 11 19 11 5'/%3E%3Cpath d='M15.6 8.6a5 5 0 0 1 0 6.8'/%3E%3C/svg%3E");
}

.hud-range--hue::-webkit-slider-thumb,
.hud-range--hue::-moz-range-thumb {
    background-image: conic-gradient(from 0deg,
        hsl(0, 78%, 58%), hsl(60, 78%, 58%), hsl(120, 78%, 58%), hsl(180, 78%, 58%),
        hsl(240, 78%, 58%), hsl(300, 78%, 58%), hsl(360, 78%, 58%));
    background-size: 62% 62%;
}

.hud-theme {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5em;
    width: 100%;
    height: var(--hud-btn-h);
    padding: 0;
    border: 1px solid var(--hud-line-soft);
    border-radius: 999px;
    background: rgba(234, 243, 255, 0.05);
    color: var(--hud-ink);
    font-family: var(--hud-font);
    font-size: var(--hud-ctl-fs);
    letter-spacing: var(--hud-ctl-ls);
    cursor: pointer;
    transition: background-color 0.16s ease, border-color 0.16s ease;
}

.hud-theme:hover {
    background: rgba(234, 243, 255, 0.14);
    border-color: var(--hud-line-on);
}

.hud-theme svg {
    width: calc(14px * var(--hud-s, 1));
    height: calc(14px * var(--hud-s, 1));
    display: block;
}

.hud-pens {
    position: absolute;
    right: 7%;
    bottom: 0;
    width: calc(var(--hud-band-x) - 7%);
    height: calc(100% - var(--hud-band));
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    padding-right: var(--hud-pad);
    pointer-events: auto;
}

.hud-pen {
    display: flex;
    align-items: center;
    gap: 0;
}

.hud-pen__btn {
    display: inline-flex;
    align-items: center;
    gap: 0.35em;
    height: var(--hud-btn-h);
    padding: 0 0.5em;
    border: 1px solid var(--hud-line-soft);
    border-radius: 5px;
    background: rgba(234, 243, 255, 0.04);
    color: var(--hud-ink-dim);
    font-family: var(--hud-font);
    font-size: calc(11px * var(--hud-s, 1));
    letter-spacing: 0.08em;
    white-space: nowrap;
    cursor: pointer;
    transition: color 0.16s ease, background-color 0.16s ease, border-color 0.16s ease;
}

.hud-pen__name {
    display: inline-block;
    max-width: 6em;
    overflow: hidden;
    white-space: nowrap;
    transition: max-width 0.26s cubic-bezier(0.22, 0.61, 0.36, 1), opacity 0.2s ease;
}

.hud-pen.is-on .hud-pen__name {
    max-width: 0;
    opacity: 0;
}

.hud-pen__btn:hover {
    color: var(--hud-ink);
    background: rgba(234, 243, 255, 0.12);
}

.hud-pen.is-on .hud-pen__btn {
    color: var(--hud-ink);
    border-color: var(--hud-line-on);
    background: rgba(234, 243, 255, 0.16);
}

.hud-pen__ico svg {
    width: calc(13px * var(--hud-s, 1));
    height: calc(13px * var(--hud-s, 1));
    display: block;
}

.hud-pen__tools {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 6px;
    width: 0;
    overflow: hidden;
    opacity: 0;
    will-change: width;
    transition: width 0.28s cubic-bezier(0.22, 0.61, 0.36, 1), opacity 0.22s ease;
}

/* ★ 展开:回到历史版的 clamp 数值动画(平滑推挤,手感不变)。
   裁切根因是 flex 链收缩:默认 flex-shrink:1 会把工具层压回容器剩余
   空间(~150px),再被 overflow:hidden 裁成"三个半"。
   这里给两层都禁收缩(flex-shrink:0),工具层完整占 clamp 宽度,
   .hud-pens 无 overflow,向左溢出为自由空间 —— 任何分辨率同一条规则。 */
.hud-pen.is-on .hud-pen__tools {
    width: clamp(170px, 11vw, calc(250px * var(--hud-s, 1)));
    flex-shrink: 0;
    opacity: 1;
}

.hud-pen.is-on {
    flex-shrink: 0;
}

.hud-pen__size {
    display: flex;
    align-items: center;
    gap: 6px;
}

.hud-pen__colors {
    display: none;
    align-items: center;
    gap: 4px;
}

.hud-pen.is-on .hud-pen__colors {
    display: inline-flex;
}

.hud-pen__colors {
    flex: 0 0 auto;
}


.hud-pen__swatch {
    width: calc(13px * var(--hud-s, 1));
    height: calc(13px * var(--hud-s, 1));
    padding: 0;
    border: 1px solid rgba(234, 243, 255, 0.35);
    border-radius: 50%;
    background: var(--pen-c, #eaf3ff);
    cursor: pointer;
    transition: transform 0.14s ease, border-color 0.14s ease;
}

.hud-pen__swatch:hover {
    transform: scale(1.18);
    border-color: rgba(234, 243, 255, 0.85);
}

.hud-pen__swatch.is-on {
    border-color: #ffffff;
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--pen-c) 60%, transparent);
}

.hud-pen__dot {
    flex: 0 0 auto;
    width: calc(18px * var(--hud-s, 1));
    height: calc(18px * var(--hud-s, 1));
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    border: 1px solid var(--hud-line-soft);
}

.hud-pen__dot::after {
    content: "";
    width: calc(2px + var(--pen-size, 8) * 0.7px);
    height: calc(2px + var(--pen-size, 8) * 0.7px);
    border-radius: 50%;
    background: var(--pen-color, var(--hud-ink));
    opacity: 0.9;
}

.hud-pen__range {
    -webkit-appearance: none;
    appearance: none;
    width: clamp(70px, 6vw, calc(120px * var(--hud-s, 1)));
    height: 3px;
    margin: 0;
    background: var(--hud-rail);
    border-radius: 2px;
    outline: none;
    cursor: pointer;
}

.hud-pen__range::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: calc(14px * var(--hud-s, 1));
    height: calc(14px * var(--hud-s, 1));
    border-radius: 50%;
    background: rgba(10, 14, 22, 0.88);
    border: 1.5px solid rgba(234, 243, 255, 0.85);
    cursor: grab;
}

.hud-pen__range::-moz-range-thumb {
    width: calc(14px * var(--hud-s, 1));
    height: calc(14px * var(--hud-s, 1))
    border-radius: 50%;
    background: rgba(10, 14, 22, 0.88);
    border: 1.5px solid rgba(234, 243, 255, 0.85);
    cursor: grab;
}

.hud-type {
    position: fixed;
    left: min(76px, max(20px, calc(3.6vw - 20px)));
    top: 13%;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 6px 9px;
    border: 1px solid rgba(234, 243, 255, 0.22);
    border-radius: 8px;
    background: var(--hud-cover, rgba(6, 10, 18, 0.86));
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
    color: rgba(234, 243, 255, 0.92);
    font-family: var(--hud-font);
    pointer-events: auto;
}

.hud-type[hidden] {
    display: none;
}

.hud-type--lane {
    padding: 5px 7px;
    gap: 2px;
    border-color: rgba(234, 243, 255, 0.16);
    box-shadow: inset 2px 0 0 var(--mc-color, rgb(34, 211, 238));
    padding: 6px 9px;
    gap: 4px;
}

@media (max-width: 1600px) {
    .hud-type--lane {
        padding: 5px 7px;
        gap: 2px;
    }
}

.hud-type--lane .hud-type__lab {
    font-size: calc(10px * var(--hud-s, 1));
}

@media (min-width: 1601px) {
    .hud-type--lane .hud-type__lab { font-size: calc(11px * var(--hud-s, 1)); }
    .hud-type--lane .hud-type__step {
        width: calc(18px * var(--hud-s, 1));
        height: calc(18px * var(--hud-s, 1));
        font-size: calc(12px * var(--hud-s, 1));
    }
    .hud-type--lane .hud-type__val {
        min-width: calc(26px * var(--hud-s, 1));
        font-size: calc(11px * var(--hud-s, 1));
    }
}

.hud-type--lane .hud-type__step {
    width: calc(16px * var(--hud-s, 1));
    height: calc(16px * var(--hud-s, 1));
    font-size: calc(11px * var(--hud-s, 1));
}

.hud-type--lane .hud-type__val {
    min-width: calc(18px * var(--hud-s, 1));
    font-size: calc(10px * var(--hud-s, 1));
}

@media (max-width: 1259px) {
    .hud-type {
        display: none;
    }
}

.hud-type__lab {
    font-size: calc(11px * var(--hud-s, 1));
    letter-spacing: 0.04em;
    color: rgba(234, 243, 255, 0.68);
    white-space: nowrap;
}

.hud-type__step {
    width: calc(18px * var(--hud-s, 1));
    height: calc(18px * var(--hud-s, 1));
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: 1px solid rgba(234, 243, 255, 0.22);
    border-radius: 4px;
    background: rgba(234, 243, 255, 0.06);
    color: rgba(234, 243, 255, 0.92);
    font-family: var(--hud-font);
    font-size: calc(12px * var(--hud-s, 1));
    line-height: 1;
    cursor: pointer;
    transition: background-color 0.16s ease, border-color 0.16s ease;
}

.hud-type__step:hover {
    background: rgba(234, 243, 255, 0.2);
    border-color: rgba(234, 243, 255, 0.6);
}

.hud-type__val {
    min-width: calc(26px * var(--hud-s, 1));
    font-size: calc(11px * var(--hud-s, 1));
    color: rgba(234, 243, 255, 0.62);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

:root[data-theme].shell-page .top-link {
    right: calc(var(--hud-col) + 1.6rem);
}

@media (max-width: 1180px) {
    .page-hud {
        display: none;
    }

    :root[data-theme].shell-page .top-link {
        right: 2rem;
    }
}

@media (prefers-reduced-motion: reduce) {
    .hud-run {
        animation: none !important;
    }

    .hud-pen__size {
        transition: none;
    }
}

/* ============================================================
   灵动感:节奏扰动层
   —— 不加元素,只让既有的循环"不再匀速"。
   匀速循环看两眼就是壁纸;活物的动感来自偶发。
   ============================================================ */

/* 1. 跑灯:偶发"闪断"——大部分时间正常,偶尔极短一暗(继电器抖一下)。
      12s 基础动画之上叠加一条 7.3s 的 steps 曲线(非整数倍周期,
      避免两个循环锁定)。★ 改 opacity(path 上唯一可靠的可动画属性;
      之前用 letter-spacing,SVG path 不认,等于白写 —— bug 修掉)。 */
.hud-run {
    animation:
        hud-run var(--hud-run-dur) linear infinite,
        hud-run-stutter 7.3s steps(1, end) infinite;
}
@keyframes hud-run-stutter {
    /* 0~63% 正常;63.2% 瞬暗一拍;88% 处再来极短一次。
        两次间隔不等 → 与基础周期永不同步。 */
    0%, 63.1% { opacity: calc(0.45 + var(--hud-glow, 0) * 0.45); }
    63.2%, 63.9% { opacity: 0.06; }
    64%, 87.9% { opacity: calc(0.45 + var(--hud-glow, 0) * 0.45); }
    88%, 88.6% { opacity: 0.10; }
    88.7%, 100% { opacity: calc(0.45 + var(--hud-glow, 0) * 0.45); }
}

/* 2. HUD 框线:极慢"呼吸"——亮度整体 3% 上下浮动,
      两条线(框/侧带)周期不同,偶尔同相=整框亮一下,随即散开。
      ★ 用 opacity 而非 filter: brightness —— opacity 走合成器,
        filter 逐帧重绘整条 SVG 线,白花帧预算。 */
.hud-line {
    animation: hud-line-breathe 9.7s ease-in-out infinite;
}
.hud-band-line {
    animation: hud-line-breathe 13.1s ease-in-out infinite;
}
@keyframes hud-line-breathe {
    0%, 100% { opacity: var(--hud-line-a, 0.42); }
    43% { opacity: calc(var(--hud-line-a, 0.42) + 0.10); }
    61% { opacity: calc(var(--hud-line-a, 0.42) - 0.06); }
}

/* 3. 面板小块(hud-face):缓慢错落的明暗游移——
      像指示灯各自待机,不齐步。五块用五条 delay。 */
.hud-face--0 { animation: hud-face-idle 11.3s ease-in-out infinite; }
.hud-face--1 { animation: hud-face-idle 13.7s ease-in-out infinite 2.1s; }
.hud-face--2 { animation: hud-face-idle 9.1s ease-in-out infinite 4.4s; }
.hud-face--3 { animation: hud-face-idle 12.9s ease-in-out infinite 6.8s; }
.hud-face--4 { animation: hud-face-idle 10.7s ease-in-out infinite 8.3s; }
@keyframes hud-face-idle {
    0%, 100% { fill: rgba(234, 243, 255, 0.05); }
    38% { fill: rgba(234, 243, 255, 0.10); }
    55% { fill: rgba(234, 243, 255, 0.04); }
}

/* 4. 站名:呼吸只在"极暗处"可感的程度——
      光晕收放读作"屏幕供电的微噪",不是发光动画。
      ★ keyframes 里动 text-shadow 是逐帧重绘文字;改成
        双层结构太重,这里直接把光晕 alpha 的浮动做进
        三个关键帧(数值本身即呼吸),其余交给合成。 */
.hud-logo {
    animation: hud-logo-noise 8.9s ease-in-out infinite;
}
@keyframes hud-logo-noise {
    0%, 100% { text-shadow: 0 0 24px rgba(234, 243, 255, 0.28); }
    47% { text-shadow: 0 0 24px rgba(234, 243, 255, 0.22); }
    62% { text-shadow: 0 0 24px rgba(234, 243, 255, 0.32); }
}

@media (prefers-reduced-motion: reduce) {
    .hud-run,
    .hud-line,
    .hud-band-line,
    .hud-face--0, .hud-face--1, .hud-face--2, .hud-face--3, .hud-face--4,
    .hud-logo {
        animation: none !important;
    }
}

/* 5. hud-toc 进度条的拇指:待机时极慢地"悬着"——不是匀速滚,
      而是随阅读走,静止时有一点点残余浮动(呼吸),提示"是活的" */
.hud-toc__prog-thumb {
    animation: hud-thumb-breathe 6.1s ease-in-out infinite;
}
@keyframes hud-thumb-breathe {
    0%, 100% { opacity: 0.85; }
    50% { opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
    .hud-toc__prog-thumb { animation: none !important; }
}