/* ═══════════════════════════════════════════════════════════════════ sw —— 银狼 / Silver Wolf 主题（崩坏：星穹铁道） 要素：量子紫底 + 霓虹青/品红、黑客 HUD、切角面板、故障字、 扫描线、作弊码跑马灯、像素网格 ═══════════════════════════════════════════════════════════════════ */ html[data-scheme="sw"] { --bg: #0a0612; --ui: #e9dcff; --me: #ff4fd8; --me-hi: #ffa8ec; --anom: #38e1ff; --err: #ff4f6d; --dim-k: 0.66; --scan: 0.1; --glow: 0.2; --sw-void: #08040f; --sw-ink: #e9dcff; --sw-dim: #9c8fc4; --sw-violet: #a855f7; --sw-violet-d: #6d28d9; --sw-cyan: #38e1ff; --sw-pink: #ff4fd8; --sw-lime: #b6ff3c; --sw-line: rgba(168, 85, 247, .4); --sw-line-soft: rgba(168, 85, 247, .18); --sw-panel: rgba(24, 12, 42, .72); --sw-panel-2: rgba(38, 18, 64, .55); --cut: 18px; /* 切角尺寸 */ } /* ── 底：深紫黑 + 透视网格 + 两团霓虹光晕 ── */ html[data-scheme="sw"] body { background: radial-gradient(60% 45% at 12% 0%, rgba(168, 85, 247, .34), transparent 62%), radial-gradient(50% 40% at 92% 8%, rgba(56, 225, 255, .2), transparent 64%), radial-gradient(80% 60% at 50% 110%, rgba(255, 79, 216, .18), transparent 66%), linear-gradient(180deg, #0a0612 0%, #0d0718 55%, #120a20 100%); color: var(--sw-ink); background-attachment: fixed; } html[data-scheme="sw"] .crt { background: repeating-linear-gradient(0deg, rgba(0, 0, 0, .22) 0 1px, transparent 1px 3px), repeating-linear-gradient(90deg, rgba(168, 85, 247, .05) 0 1px, transparent 1px 44px), repeating-linear-gradient(0deg, rgba(168, 85, 247, .05) 0 1px, transparent 1px 44px); opacity: .9; mix-blend-mode: normal; } html[data-scheme="sw"] .crt::after { background: radial-gradient(115% 105% at 50% 42%, transparent 54%, rgba(6, 2, 12, .62) 100%); opacity: 1; } /* ── 顶栏：HUD 条，左右各一个角标 ── */ html[data-scheme="sw"] .bar { background: linear-gradient(180deg, rgba(30, 14, 52, .92), rgba(16, 8, 28, .92)); border-bottom: 1px solid var(--sw-line); box-shadow: 0 1px 0 rgba(56, 225, 255, .18), 0 8px 28px rgba(0, 0, 0, .5); color: var(--sw-ink); } html[data-scheme="sw"] .bar__l b { color: var(--sw-cyan); } html[data-scheme="sw"] .bar__l .dim, html[data-scheme="sw"] .bar__r .dim { color: var(--sw-dim); } html[data-scheme="sw"] .bar__title { font-family: var(--mono); letter-spacing: .2em; text-transform: uppercase; color: var(--sw-pink); text-shadow: 0 0 10px rgba(255, 79, 216, .55); border-left: 1px solid var(--sw-line); } html[data-scheme="sw"] .mem i { background: rgba(168, 85, 247, .28); } html[data-scheme="sw"] .mem i.on { background: var(--sw-cyan); box-shadow: 0 0 8px rgba(56, 225, 255, .7); } html[data-scheme="sw"] .mem i.hot { background: var(--sw-pink); box-shadow: 0 0 10px rgba(255, 79, 216, .8); } html[data-scheme="sw"] .mem span, html[data-scheme="sw"] .bar__pid { color: var(--sw-dim); } html[data-scheme="sw"] .bar__c button { color: var(--sw-dim); border: 1px solid transparent; background: none; letter-spacing: .1em; } html[data-scheme="sw"] .bar__c button:hover { color: var(--sw-ink); } html[data-scheme="sw"] .bar__c button.on { color: var(--sw-void); background: var(--sw-cyan); border-color: var(--sw-cyan); box-shadow: 0 0 14px rgba(56, 225, 255, .55); } html[data-scheme="sw"] .bar__pet { color: var(--sw-dim); } html[data-scheme="sw"] .bar__pet:hover { color: var(--sw-cyan); border-color: var(--sw-line); } html[data-scheme="sw"] .hb { background: var(--sw-pink); box-shadow: 0 0 10px rgba(255, 79, 216, .9); animation: swBlink 1.6s steps(2, end) infinite; } @keyframes swBlink { 0%, 60% { opacity: 1; } 61%, 100% { opacity: .25; } } html[data-scheme="sw"] #clock { color: var(--sw-ink); } /* ── 首屏：故障字 ── */ html[data-scheme="sw"] .boot .ln { color: var(--sw-dim); } html[data-scheme="sw"] .boot .ln .ps { color: var(--sw-cyan); } html[data-scheme="sw"] .name { color: var(--sw-ink); letter-spacing: .06em; text-shadow: -2px 0 rgba(56, 225, 255, .55), 2px 0 rgba(255, 79, 216, .55), 0 0 24px rgba(168, 85, 247, .5); } html[data-scheme="sw"] .lede { color: #cdbdf0; } html[data-scheme="sw"] .cmd { color: var(--sw-ink); } html[data-scheme="sw"] .cmd .ps { color: var(--sw-cyan); } html[data-scheme="sw"] .hint { color: var(--sw-dim); } html[data-scheme="sw"] .caret { background: var(--sw-pink); box-shadow: 0 0 8px var(--sw-pink); } html[data-scheme="sw"] #wish-in { background: rgba(10, 6, 20, .7); border: 1px solid var(--sw-line); color: var(--sw-ink); caret-color: var(--sw-cyan); padding: 2px 10px; clip-path: polygon(6px 0, 100% 0, 100% calc(100% - 6px), calc(100% - 6px) 100%, 0 100%, 0 6px); } html[data-scheme="sw"] #wish-in::placeholder { color: var(--sw-dim); } html[data-scheme="sw"] .hint--type.typing #wish-in { border-color: var(--sw-cyan); box-shadow: 0 0 18px rgba(56, 225, 255, .3); } html[data-scheme="sw"] .ls a { color: #cbb9f2; } html[data-scheme="sw"] .ls a:hover { color: var(--sw-cyan); text-decoration: underline; text-underline-offset: 3px; text-shadow: 0 0 10px rgba(56, 225, 255, .6); } html[data-scheme="sw"] .ls span { color: var(--sw-dim); } /* neofetch：HUD 面板 */ html[data-scheme="sw"] .fetch { background: var(--sw-panel); border: 1px solid var(--sw-line-soft); clip-path: polygon(var(--cut) 0, 100% 0, 100% calc(100% - var(--cut)), calc(100% - var(--cut)) 100%, 0 100%, 0 var(--cut)); box-shadow: inset 0 0 0 1px rgba(56, 225, 255, .07), 0 10px 34px rgba(0, 0, 0, .55); } html[data-scheme="sw"] .fetch dt { color: var(--sw-dim); } html[data-scheme="sw"] .fetch dd { color: var(--sw-ink); } html[data-scheme="sw"] .fetch dd b { color: var(--sw-cyan); } html[data-scheme="sw"] .fetch__hint { color: var(--sw-dim); } /* ── 各屏：切角面板 + 顶部霓虹线 + 序号标记 ── */ html[data-scheme="sw"] .wrap { counter-reset: chap; } html[data-scheme="sw"] .frame { background: var(--sw-panel); border: 1px solid var(--sw-line-soft); clip-path: polygon(var(--cut) 0, 100% 0, 100% calc(100% - var(--cut)), calc(100% - var(--cut)) 100%, 0 100%, 0 var(--cut)); box-shadow: inset 0 0 0 1px rgba(56, 225, 255, .06), 0 12px 40px rgba(0, 0, 0, .55); } html[data-scheme="sw"] .frame::before, html[data-scheme="sw"] .frame::after { opacity: 0; } html[data-scheme="sw"] .frame__bar { background: linear-gradient(90deg, rgba(168, 85, 247, .26), rgba(168, 85, 247, .06) 60%, transparent); border-bottom: 1px solid var(--sw-line-soft); color: var(--sw-ink); letter-spacing: .12em; text-transform: uppercase; } html[data-scheme="sw"] .frame__bar span:first-child { font-weight: 700; color: var(--sw-cyan); text-shadow: 0 0 12px rgba(56, 225, 255, .45); } html[data-scheme="sw"] .frame__foot { color: var(--sw-dim); } html[data-scheme="sw"] .frame__foot b { color: var(--sw-ink); } html[data-scheme="sw"] .block { counter-increment: chap; } html[data-scheme="sw"] .block > .cmd::before { content: "▚ " counter(chap, decimal-leading-zero) " //"; color: var(--acc, var(--sw-violet)); margin-right: 8px; letter-spacing: .1em; font-weight: 700; text-shadow: 0 0 12px currentColor; } /* 每一屏一个量子色 */ html[data-scheme="sw"] #checkin { --acc: var(--sw-cyan); } html[data-scheme="sw"] #journey { --acc: #9d7bff; } html[data-scheme="sw"] #notes { --acc: var(--sw-pink); } html[data-scheme="sw"] #works { --acc: #b6ff3c; } html[data-scheme="sw"] #collected { --acc: #ffb03c; } html[data-scheme="sw"] #contact { --acc: var(--me); } /* chip / 按钮：切角小块 */ html[data-scheme="sw"] .chips button, html[data-scheme="sw"] .chip, html[data-scheme="sw"] .btn { background: rgba(168, 85, 247, .1); border: 1px solid var(--sw-line-soft); color: #cbb9f2; border-radius: 0; clip-path: polygon(5px 0, 100% 0, 100% calc(100% - 5px), calc(100% - 5px) 100%, 0 100%, 0 5px); } html[data-scheme="sw"] .chips button:hover, html[data-scheme="sw"] .chip:hover, html[data-scheme="sw"] .btn:hover { background: rgba(56, 225, 255, .16); border-color: var(--sw-cyan); color: var(--sw-cyan); } html[data-scheme="sw"] .chips button.on, html[data-scheme="sw"] .chip.on { background: var(--sw-cyan); border-color: var(--sw-cyan); color: var(--sw-void); box-shadow: 0 0 16px rgba(56, 225, 255, .45); } html[data-scheme="sw"] .btn--ghost { color: var(--sw-dim); } /* 进度条 */ html[data-scheme="sw"] .meter { background: rgba(168, 85, 247, .12); border: 1px solid var(--sw-line-soft); border-radius: 0; } html[data-scheme="sw"] .meter i { background: linear-gradient(90deg, var(--acc, var(--sw-violet)), var(--sw-cyan)); box-shadow: 0 0 10px rgba(56, 225, 255, .35); } html[data-scheme="sw"] .yr button { color: var(--sw-dim); } /* 选中态是"青底"，文字必须用底色，否则青字压青底 = 看不见 */ html[data-scheme="sw"] .yr button.on { color: #07040f; background: var(--sw-cyan); border-color: var(--sw-cyan); border-bottom: 1px solid var(--sw-cyan); } /* 联系那块 */ html[data-scheme="sw"] .who { background: rgba(20, 10, 36, .6); border: 1px solid var(--sw-line-soft); clip-path: polygon(10px 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%, 0 10px); } html[data-scheme="sw"] .who__h::before { background: var(--sw-lime); box-shadow: 0 0 10px var(--sw-lime); } html[data-scheme="sw"] .mail__in, html[data-scheme="sw"] .mail__ta { background: rgba(8, 4, 16, .7); border: 1px solid var(--sw-line-soft); color: var(--sw-ink); border-radius: 0; } html[data-scheme="sw"] .mail__in:focus, html[data-scheme="sw"] .mail__ta:focus { border-color: var(--sw-cyan); box-shadow: 0 0 16px rgba(56, 225, 255, .25); outline: none; } /* 命令行：HUD 控制台 */ html[data-scheme="sw"] .sh { background: rgba(10, 5, 20, .94); border-top: 1px solid var(--sw-line); box-shadow: 0 -8px 32px rgba(0, 0, 0, .6); backdrop-filter: blur(4px); } html[data-scheme="sw"] .sh__list { background: rgba(16, 8, 30, .9); border-bottom: 1px solid var(--sw-line-soft); } html[data-scheme="sw"] .sh__list li { color: #cbb9f2; } html[data-scheme="sw"] .sh__list li .a { color: var(--sw-cyan); } html[data-scheme="sw"] .sh__list li .d { color: var(--sw-dim); } html[data-scheme="sw"] .sh__list li.on { background: var(--sw-violet); color: #fff; } html[data-scheme="sw"] .sh__list li.on .k, html[data-scheme="sw"] .sh__list li.on .a, html[data-scheme="sw"] .sh__list li.on .d { color: #fff; } html[data-scheme="sw"] .sh__hint { color: var(--sw-dim); } html[data-scheme="sw"] .sh__hint b { color: var(--sw-cyan); } /* 宠物气泡 / 标尺 / 飘字 */ html[data-scheme="sw"] .pet__say { background: rgba(14, 7, 26, .92); border: 1px solid var(--sw-line); color: var(--sw-ink); clip-path: polygon(6px 0, 100% 0, 100% calc(100% - 6px), calc(100% - 6px) 100%, 0 100%, 0 6px); } html[data-scheme="sw"] .pet img { filter: drop-shadow(0 0 16px rgba(168, 85, 247, .5)); } html[data-scheme="sw"] .gauge { color: var(--sw-dim); } html[data-scheme="sw"] .gauge__rail { background: rgba(168, 85, 247, .2); } html[data-scheme="sw"] .gauge__rail i { background: var(--sw-cyan); box-shadow: 0 0 10px var(--sw-cyan); } html[data-scheme="sw"] .wishes span { color: #d9c9ff; text-shadow: 0 0 14px rgba(168, 85, 247, .7); } html[data-scheme="sw"] .wishes span.on { opacity: .38; } html[data-scheme="sw"] .stream { opacity: .2; color: var(--sw-violet); } html[data-scheme="sw"] .wish-clear { color: var(--sw-dim); } html[data-scheme="sw"] .wish-clear[data-done="1"] { color: var(--sw-cyan); } html[data-scheme="sw"] ::selection { background: rgba(255, 79, 216, .3); } html[data-scheme="sw"] ::-webkit-scrollbar { width: 10px; } html[data-scheme="sw"] ::-webkit-scrollbar-track { background: #0a0612; } html[data-scheme="sw"] ::-webkit-scrollbar-thumb { background: linear-gradient(180deg, var(--sw-violet), var(--sw-cyan)); border: 3px solid #0a0612; } /* ── 底部：作弊码跑马灯（替掉 paper 那条斜纹） ── */ html[data-scheme="sw"] .band { display: block; position: fixed; /* paper 那条规则只在 paper 作用域里，这里必须自己声明 */ left: 0; right: 0; top: 45px; /* 贴顶栏下沿，不和底部命令行抢位置 */ bottom: auto; height: 20px; z-index: 39; background: linear-gradient(180deg, rgba(168, 85, 247, .14), rgba(10, 5, 20, .96)); border-top: 1px solid var(--sw-line); overflow: hidden; white-space: nowrap; } html[data-scheme="sw"] .band::before { content: "AETHER-EDIT ▚ QUANTUM ▚ SILVER WOLF ▚ LV.999 ▚ CHEAT CODE: 777 ▚ STELLARON HUNTER ▚ GAME OVER? NO ▚ REWIND ▚ AETHER-EDIT ▚ QUANTUM ▚ SILVER WOLF ▚ LV.999 ▚ CHEAT CODE: 777 ▚ STELLARON HUNTER ▚ GAME OVER? NO ▚ REWIND ▚ AETHER-EDIT ▚ QUANTUM ▚ SILVER WOLF ▚ LV.999 ▚ CHEAT CODE: 777 ▚ STELLARON HUNTER ▚ GAME OVER? NO ▚ REWIND ▚ "; display: inline-block; padding-left: 0; font-family: var(--mono); font-size: 10px; letter-spacing: .22em; color: var(--sw-cyan); opacity: .8; animation: swTicker 28s linear infinite; } @keyframes swTicker { from { transform: translateX(0); } to { transform: translateX(-33.3333%); } /* 内容是三份，移一份就接上 */ } /* ── 右边那列 HUD 刻度 ── */ html[data-scheme="sw"] .gauge::after { content: "SYS//OK"; position: fixed; right: 6px; bottom: 34px; font-family: var(--mono); font-size: 9px; letter-spacing: .2em; color: var(--sw-dim); writing-mode: vertical-rl; } @media (prefers-reduced-motion: reduce) { html[data-scheme="sw"] .band::before { animation: none; padding-left: 0; } html[data-scheme="sw"] .hb { animation: none; } } @media (max-width: 780px) { html[data-scheme="sw"] .band { height: 16px; } html[data-scheme="sw"] .gauge::after { display: none; } } /* ── 左侧 HUD 栏：只在 sw 主题露脸，是这一档的排版特征 ── */ .hud { display: none; } html[data-scheme="sw"] .hud { display: flex; position: fixed; left: 0; top: 46px; bottom: 22px; width: 26px; z-index: 41; flex-direction: column; align-items: center; justify-content: space-between; padding: 10px 0; pointer-events: none; border-right: 1px solid var(--sw-line-soft); background: linear-gradient(180deg, rgba(20, 10, 36, .55), rgba(10, 5, 20, .2)); } html[data-scheme="sw"] .hud__tag { writing-mode: vertical-rl; font-family: var(--mono); font-size: 9px; letter-spacing: .34em; color: var(--sw-cyan); opacity: .8; text-shadow: 0 0 10px rgba(56, 225, 255, .5); } html[data-scheme="sw"] .hud__tag--2 { color: var(--sw-pink); text-shadow: 0 0 10px rgba(255, 79, 216, .5); transform: rotate(180deg); } html[data-scheme="sw"] .hud__rule { flex: 1; width: 1px; margin: 10px 0; background: repeating-linear-gradient( 180deg, rgba(168, 85, 247, .7) 0 5px, transparent 5px 11px ); } /* 内容整体右移一点，给 HUD 栏让位 —— 这就是"按她的要素改排版" */ html[data-scheme="sw"] .wrap { padding-left: calc(24px + 22px); } html[data-scheme="sw"] .bar { padding-left: 30px; } @media (max-width: 900px) { html[data-scheme="sw"] .hud { display: none; } html[data-scheme="sw"] .wrap { padding-left: 24px; } html[data-scheme="sw"] .bar { padding-left: 14px; } } /* 切角那一侧的角标：一条青线压在对角线上，让"被切掉一块"看得出来 */ html[data-scheme="sw"] .frame, html[data-scheme="sw"] .fetch { position: relative; } html[data-scheme="sw"] .frame::before, html[data-scheme="sw"] .fetch::before { content: ""; position: absolute; left: 0; top: 0; width: var(--cut); height: var(--cut); background: linear-gradient(135deg, var(--sw-cyan), transparent 72%); opacity: .55; z-index: 3; pointer-events: none; } html[data-scheme="sw"] .frame::after, html[data-scheme="sw"] .fetch::after { content: ""; position: absolute; right: 0; bottom: 0; width: var(--cut); height: var(--cut); background: linear-gradient(315deg, var(--sw-pink), transparent 72%); opacity: .5; z-index: 3; pointer-events: none; } /* 点阵地图在深紫底上会糊，提亮一档 */ html[data-scheme="sw"] #dotmap { filter: brightness(1.4) contrast(1.1); } html[data-scheme="sw"] #dotfx { filter: brightness(1.15); } /* ── 漂移的像素方块层（swfx.js 画的 canvas） ── */ .swblocks { position: fixed; inset: 0; z-index: 1; pointer-events: none; opacity: .9; } html:not([data-scheme="sw"]) .swblocks { display: none; } /* ── 全息数据屏：照她立绘里那块半透明 HUD ── */ html[data-scheme="sw"] .holo { margin-top: 12px; padding: 8px 10px 7px; background: rgba(16, 8, 32, .58); border: 1px solid rgba(56, 225, 255, .28); clip-path: polygon(10px 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%, 0 10px); box-shadow: inset 0 0 22px rgba(56, 225, 255, .08), 0 8px 26px rgba(0, 0, 0, .5); } html[data-scheme="sw"] .holo__hd { display: flex; justify-content: space-between; align-items: baseline; font-family: var(--mono); font-size: 9.5px; letter-spacing: .22em; color: var(--sw-dim); border-bottom: 1px solid rgba(56, 225, 255, .16); padding-bottom: 4px; } html[data-scheme="sw"] .holo__hd b { color: var(--sw-lime); text-shadow: 0 0 10px rgba(182, 255, 60, .6); } html[data-scheme="sw"] .holo__chart { display: flex; align-items: flex-end; gap: 3px; height: 42px; padding: 6px 0 4px; } html[data-scheme="sw"] .holo__chart i { flex: 1; height: var(--h, 50%); background: linear-gradient(180deg, var(--sw-cyan), rgba(168, 85, 247, .5)); box-shadow: 0 0 8px rgba(56, 225, 255, .35); animation: holoPulse 2.4s ease-in-out infinite; } html[data-scheme="sw"] .holo__chart i:nth-child(2n) { animation-delay: .4s; } html[data-scheme="sw"] .holo__chart i:nth-child(3n) { animation-delay: .9s; } @keyframes holoPulse { 0%, 100% { transform: scaleY(1); opacity: .8; } 50% { transform: scaleY(.72); opacity: 1; } } html[data-scheme="sw"] .holo__ft { display: flex; justify-content: space-between; font-family: var(--mono); font-size: 9px; letter-spacing: .2em; color: rgba(168, 85, 247, .8); } /* ── 目录列表前面挂一个像素十字键（照她袖子上的手柄键位） ── */ html[data-scheme="sw"] .ls a::before { content: ""; display: inline-block; width: 9px; height: 9px; margin-right: 7px; vertical-align: middle; background: linear-gradient(var(--sw-line), var(--sw-line)) 3px 0/3px 9px no-repeat, linear-gradient(var(--sw-line), var(--sw-line)) 0 3px/9px 3px no-repeat; opacity: .9; } html[data-scheme="sw"] .ls a:hover::before { background: linear-gradient(var(--sw-pink), var(--sw-pink)) 3px 0/3px 9px no-repeat, linear-gradient(var(--sw-pink), var(--sw-pink)) 0 3px/9px 3px no-repeat; } /* ── 「继续」后面那个粉色播放键（她立绘里那个图标） ── */ html[data-scheme="sw"] .hint--type::after { content: ""; width: 13px; height: 13px; margin-left: 4px; flex: none; border-radius: 50%; background: url("data:image/svg+xml;utf8,") center / contain no-repeat; filter: drop-shadow(0 0 6px rgba(255, 79, 216, .75)); opacity: .95; } /* 页面底色要压在方块层下面。 注意：.bar / .sh 不能写 position: relative —— 那会把它们的 position: fixed 顶掉， 顶栏和命令行条就会跟着页面滚走（曾经就是这样，导致顶栏/底栏看不到）。 它们自己的 z-index（60 / 70）已经足够压在方块层之上了。 */ html[data-scheme="sw"] .wrap { position: relative; z-index: 2; } @media (prefers-reduced-motion: reduce) { html[data-scheme="sw"] .holo__chart i { animation: none; } } 22% { transform: translateY(-3px); } 44% { transform: translateY(0); } 62% { transform: translateY(-1.5px); } 80% { transform: translateY(0); } } /* 六屏错开，别一起跳 */ @media (prefers-reduced-motion: reduce) { html[data-scheme="sw"] .block > .cmd::before { animation: none; } } /* ══════════════════════════════════════════════════════════════ 抖动（ordered dither）+ 频闪：照像素 CRT 的做法 - 2×2 棋盘格当"中间色"，让渐变更像点阵而不是平滑过渡 - 屏幕整体有一点点电压不稳的闪 ══════════════════════════════════════════════════════════════ */ /* 全屏抖动层：4px 的棋盘格，叠在背景上（内容之上但不吃交互） */ html[data-scheme="sw"] body::after { content: ""; position: fixed; inset: 0; z-index: 1; pointer-events: none; opacity: .5; background-image: repeating-conic-gradient( from 0deg at 50% 50%, rgba(255, 255, 255, .055) 0deg 90deg, transparent 90deg 180deg ); background-size: 4px 4px; mix-blend-mode: overlay; } /* 面板里也来一层更细的抖动，给纯色玻璃加点颗粒 */ html[data-scheme="sw"] .frame, html[data-scheme="sw"] .fetch, html[data-scheme="sw"] .holo, html[data-scheme="sw"] .who { background-image: repeating-conic-gradient( from 0deg at 50% 50%, rgba(168, 85, 247, .05) 0deg 90deg, rgba(56, 225, 255, .025) 90deg 180deg ); background-size: 3px 3px; } /* 内容层压在抖动层之上，字不能被棋盘格糊住（同样不能碰 .bar / .sh 的 fixed） */ html[data-scheme="sw"] .wrap { position: relative; z-index: 2; } /* ── 频闪：整屏亮度真的在跳（原来改 .crt 的 opacity 看不出来，剔掉了） ── .flash 是一层全屏遮罩：偏黑的一帧压暗、偏白的一帧提亮， 用 steps() 让它"啪"地跳而不是渐变，像 CRT 电压不稳。 */ html[data-scheme="sw"] .flash { position: fixed; inset: 0; z-index: 60; /* 压在内容之上、命令行（70）之下 */ pointer-events: none; background: #000; opacity: 0; animation: swFlash 9.2s steps(1, end) infinite; } @keyframes swFlash { 0% { background: #000; opacity: 0; } 9% { background: #000; opacity: .07; } 10.6% { background: #000; opacity: 0; } 27.4% { background: #000; opacity: .11; } 29% { background: #000; opacity: 0; } 61% { background: #000; opacity: .05; } 62.4% { background: #000; opacity: 0; } 82% { background: #000; opacity: .04; } 83% { background: #000; opacity: 0; } 100% { background: #000; opacity: 0; } } /* 标题的频闪：偶发一次色差抖动，像信号不稳 */ html[data-scheme="sw"] .name { animation: swGlitchFlicker 6.5s steps(1, end) infinite; } @keyframes swGlitchFlicker { 0%, 92%, 100% { text-shadow: -2px 0 rgba(56, 225, 255, .55), 2px 0 rgba(255, 79, 216, .55), 0 0 24px rgba(168, 85, 247, .5); transform: translateX(0); } 93% { text-shadow: -4px 0 rgba(56, 225, 255, .9), 4px 0 rgba(255, 79, 216, .9), 0 0 30px rgba(168, 85, 247, .8); transform: translateX(-1px); } 94% { text-shadow: 3px 0 rgba(255, 79, 216, .9), -3px 0 rgba(56, 225, 255, .9), 0 0 30px rgba(168, 85, 247, .8); transform: translateX(1px); } 95% { text-shadow: -2px 0 rgba(56, 225, 255, .55), 2px 0 rgba(255, 79, 216, .55), 0 0 24px rgba(168, 85, 247, .5); transform: translateX(0); } } /* 像素字模式：抖动更粗一档（4px → 5px 视觉颗粒），文字也带一点点闪 */ html[data-font="pixel"][data-scheme="sw"] body::after { background-size: 5px 5px; opacity: .6; } html[data-font="pixel"][data-scheme="sw"] .cmd, html[data-font="pixel"][data-scheme="sw"] .fetch dd { animation: swTextFlicker 7.3s steps(1, end) infinite; } @keyframes swTextFlicker { 0%, 96%, 100% { opacity: 1; } 97% { opacity: .72; } 98% { opacity: 1; } } @media (prefers-reduced-motion: reduce) { html[data-scheme="sw"] .flash { animation: none; opacity: 0; } html[data-scheme="sw"] .name, html[data-font="pixel"][data-scheme="sw"] .cmd, html[data-font="pixel"][data-scheme="sw"] .fetch dd { animation: none; } html[data-scheme="sw"] body::after { opacity: .28; } } /* ── 频闪开关：关掉后遮罩不跑、标题也不再抖 ── */ html[data-flash="off"] .flash { animation: none !important; opacity: 0 !important; } html[data-flash="off"] .name { animation: none !important; } .bar__flash { appearance: none; background: none; border: 1px solid transparent; padding: 1px 7px; margin-left: 6px; font: inherit; font-size: .82em; letter-spacing: .08em; color: var(--dim2, #635f57); cursor: pointer; transition: color .2s ease, border-color .2s ease; } .bar__flash:hover, .bar__flash:focus-visible { color: var(--ink, #1d2029); border-color: var(--rule, rgba(29, 32, 41, .22)); outline: none; } html[data-scheme="sw"] .bar__flash { color: var(--sw-dim); } html[data-scheme="sw"] .bar__flash:hover { color: var(--sw-pink); border-color: var(--sw-line); } html[data-flash="off"] .bar__flash { opacity: .6; }