diff --git a/web/app.js b/web/app.js
new file mode 100644
index 0000000..32fe78b
--- /dev/null
+++ b/web/app.js
@@ -0,0 +1,68 @@
+/* OpenStats 官网 · 页面外壳：主题切换、菜单栏下拉菜单与时钟 */
+(() => {
+ "use strict";
+
+ const root = document.documentElement;
+ const THEME_KEY = "os-theme";
+ const media = window.matchMedia("(prefers-color-scheme: dark)");
+
+ function saved() {
+ try { return localStorage.getItem(THEME_KEY); } catch { return null; }
+ }
+ function applyTheme(theme, persist) {
+ root.dataset.theme = theme;
+ if (!persist) return;
+ try { localStorage.setItem(THEME_KEY, theme); } catch { /* 隐私模式下不可用，忽略 */ }
+ }
+
+ applyTheme(saved() || (media.matches ? "dark" : "light"), false);
+ // 没有手动选过时跟随系统
+ media.addEventListener("change", (e) => { if (!saved()) applyTheme(e.matches ? "dark" : "light", false); });
+
+ window.OpenStatsSite = {
+ toggleTheme() { applyTheme(root.dataset.theme === "dark" ? "light" : "dark", true); },
+ };
+ document.getElementById("themeToggle")?.addEventListener("click", (e) => {
+ e.stopPropagation();
+ window.OpenStatsSite.toggleTheme();
+ });
+
+ // ── 菜单栏下拉菜单：点击展开，展开后悬停切换，点外部或 Esc 收起 ──
+ const menus = [...document.querySelectorAll(".mb-menu")];
+ let openMenu = null;
+
+ function setMenu(menu) {
+ for (const m of menus) {
+ const open = m === menu;
+ m.classList.toggle("is-open", open);
+ m.querySelector(".mb-title")?.setAttribute("aria-expanded", String(open));
+ }
+ openMenu = menu;
+ }
+
+ for (const menu of menus) {
+ const title = menu.querySelector(".mb-title");
+ title?.addEventListener("click", (e) => {
+ e.preventDefault();
+ e.stopPropagation();
+ setMenu(openMenu === menu ? null : menu);
+ });
+ menu.addEventListener("mouseenter", () => { if (openMenu && openMenu !== menu) setMenu(menu); });
+ menu.querySelector(".mb-drop")?.addEventListener("click", () => setMenu(null));
+ }
+ document.addEventListener("click", (e) => { if (openMenu && !openMenu.contains(e.target)) setMenu(null); });
+ document.addEventListener("keydown", (e) => { if (e.key === "Escape") setMenu(null); });
+
+ // ── 时钟：按访客本地时间显示 ──
+ const clock = document.getElementById("menubarClock");
+ const format = new Intl.DateTimeFormat("zh-CN", { month: "numeric", day: "numeric", weekday: "short", hour: "2-digit", minute: "2-digit", hour12: false });
+ function renderClock() {
+ if (!clock) return;
+ const now = new Date();
+ const parts = Object.fromEntries(format.formatToParts(now).map((p) => [p.type, p.value]));
+ clock.textContent = `${parts.month}月${parts.day}日 ${parts.weekday} ${parts.hour}:${parts.minute}`;
+ clock.dateTime = now.toISOString();
+ }
+ renderClock();
+ setInterval(renderClock, 15000);
+})();
diff --git a/web/assets/apple-touch-icon.png b/web/assets/apple-touch-icon.png
new file mode 100644
index 0000000..381527b
Binary files /dev/null and b/web/assets/apple-touch-icon.png differ
diff --git a/web/assets/cleaner.png b/web/assets/cleaner.png
new file mode 100644
index 0000000..09f9434
Binary files /dev/null and b/web/assets/cleaner.png differ
diff --git a/web/assets/favicon-32.png b/web/assets/favicon-32.png
new file mode 100644
index 0000000..b16ea0b
Binary files /dev/null and b/web/assets/favicon-32.png differ
diff --git a/web/assets/flags/cn.svg b/web/assets/flags/cn.svg
new file mode 100644
index 0000000..10d3489
--- /dev/null
+++ b/web/assets/flags/cn.svg
@@ -0,0 +1,11 @@
+
diff --git a/web/assets/icon.png b/web/assets/icon.png
new file mode 100644
index 0000000..1ae4185
Binary files /dev/null and b/web/assets/icon.png differ
diff --git a/web/assets/popover-network-dark.png b/web/assets/popover-network-dark.png
new file mode 100644
index 0000000..3070f7d
Binary files /dev/null and b/web/assets/popover-network-dark.png differ
diff --git a/web/assets/popover-network-light.png b/web/assets/popover-network-light.png
new file mode 100644
index 0000000..1f02aee
Binary files /dev/null and b/web/assets/popover-network-light.png differ
diff --git a/web/assets/settings-menubar.png b/web/assets/settings-menubar.png
new file mode 100644
index 0000000..b72daa2
Binary files /dev/null and b/web/assets/settings-menubar.png differ
diff --git a/web/assets/thermal.png b/web/assets/thermal.png
new file mode 100644
index 0000000..0f645de
Binary files /dev/null and b/web/assets/thermal.png differ
diff --git a/web/assets/window-dark.png b/web/assets/window-dark.png
new file mode 100644
index 0000000..d7dad6a
Binary files /dev/null and b/web/assets/window-dark.png differ
diff --git a/web/assets/window-light.png b/web/assets/window-light.png
new file mode 100644
index 0000000..10a338a
Binary files /dev/null and b/web/assets/window-light.png differ
diff --git a/web/index.html b/web/index.html
new file mode 100644
index 0000000..b458996
--- /dev/null
+++ b/web/index.html
@@ -0,0 +1,410 @@
+
+
+
+
+
+OpenStats — Mac 的状态，抬眼就看见
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ 欢迎使用 OpenStats
+
+
+
+
Mac 的状态，抬眼就看见
+
CPU、GPU、内存、网络与温度常驻菜单栏，还能调风扇、防休眠、一键清理。所有数据在本机读取，没有账号与统计上报。
+
+
macOS 14 及以上 · Apple Silicon · MIT 开源
+
点右上角菜单栏里的 CPU、内存或网速，看看每一项的详情 ↗
+
+
+
+
每个指标一个图标，点开就是详情
+
原生 Swift 编写，只显示菜单栏时约 0.3% CPU、16 MB 内存。
+
+
+ -
+
八种菜单栏风格
+ 双行文字、圆环、饼图、柱状历史……整体选一种统一套用，也能给单个指标单独指定。
+
+ -
+
单项详情，按需显示
+ CPU、内存、网络、GPU、温度各有一个窄弹窗，显示哪些区块由你勾选；另有侧边栏主窗口看全部。
+
+ -
+
网络详情与 DNS
+ 本地与公网 IPv4 / IPv6、归属地与 ASN、连接探测格子，一键刷新 DNS 或切换 Cloudflare、Google、腾讯、阿里云。
+
+ -
+
风扇调速与防休眠
+ 自动、降温、强冷、自定义风扇；屏幕常亮、合上屏幕继续运行，过热或电量过低时自动恢复。
+
+ -
+
安全的清理
+ 缓存、日志、浏览器与开发者缓存先扫描预览再清理，钥匙串、Cookie 与历史记录一律不碰。
+
+ -
+
数据留在本机
+ 指标来自本机内核、IOKit 与 SMC，没有账号、没有统计上报；公网 IP 查询与连接探测都可关闭。
+
+
+
+
+
菜单栏风格，由你挑
+
点一下下面的风格，页面顶部菜单栏里的 OpenStats 会立即换成这个样子。
+
+
+
+
+
+
网络，一眼看到底
+
+ - 上下镜像的流量历史，上传绿、下载蓝
+ - 连接探测格子：每 1 / 2 / 5 秒 ping 一次，延迟、抖动、丢包一目了然
+ - 本地与公网 IPv4 / IPv6、路由器、Wi‑Fi 信号，点一下就拷贝
+ - 归属地显示国旗、城市、ASN 与网络运营方
+ - 一键刷新 DNS 缓存，一键切换 Cloudflare、Google、腾讯 DNSPod、阿里云，或手动填写
+ - 各进程的上传与下载速率
+
+
公网 IP 查询与连接探测都可以在设置里关闭。修改 DNS 需要管理员权限。
+
+
+ 
+ 
+
+
+
+
白底蓝，黑底蓝，一套外观
+
主窗口、设置和弹窗共用同一底色，侧边栏与标题栏不分栏着色；窗口宽高都能拖动调整。
+
+
+
浅色
+
深色
+
+
+
+
热了就吹，要跑就别睡
+
+ | 风扇模式 | 作用 |
|---|
+
+ | 自动 | 交还 macOS 温控 |
+ | 降温 | 最低到最高转速之间的 60% |
+ | 强冷 | 最高转速 |
+ | 自定义 | 滑块自由设定 |
+
+
+
合盖后继续运行适合下载、渲染和远程连接。使用电池且电量低于下限时会自动关闭，避免在包里过热。
+
风扇与合盖运行需要安装一次辅助工具。它只提供固定的几个操作，不执行任意命令，应用退出时自动恢复设置。
+
+
+
+
+
先看清再清理
+
+ - 应用缓存、日志与崩溃报告
+ - Chrome、Edge、Brave、Arc、Firefox、Safari 缓存
+ - Xcode 编译缓存、模拟器与 npm 缓存
+ - 未完成的下载、安装包、废纸篓
+ - 一键刷新 DNS 缓存、释放内存
+
+
只处理白名单目录；正在运行的应用会跳过，浏览器需先退出；删除前每一项再校验一次，所有操作写入日志。
+
+
+
+
+
数据不出这台 Mac
+
没有账号，没有统计上报。只有两项可关闭的网络功能会联网。
+
+
+ - 指标来源内核接口（host_processor_info、host_statistics64、sysctl）、IOKit 与 SMC
+ - 账号不需要，也没有
+ - 统计上报没有
+ - 公网 IP打开网络详情时向 ipinfo.io 查询一次地址、归属地与 ASN，10 分钟内不重复，可关闭
+ - 连接探测按设定间隔 ping 你选择的目标，只在显示网络项时运行，可关闭
+ - 偏好设置保存在本机，不含个人信息
+ - 源代码MIT 开源，全部公开
+
+
+
+
下载 OpenStats
+
使用 Developer ID 签名并经过 Apple 公证，打开时不会遇到安全拦截。
+
+
macOS 14 Sonoma 及以上 · 简体中文界面
+
+
+
+
+
+
+ 未发布
+ 新增 23 · 样式 5 · 修复 6
+
+ - 新增菜单栏显示 CPU、GPU、内存、网速、CPU 温度和风扇转速。
+ - 新增菜单栏风格：双行文字、单行文字、图标、圆环、饼图、柱状历史、电量条、状态圆点八种，整体选择一种统一套用，也可以给个别指标单独指定。设置里每种风格都有用示例数据画出的预览和说明，柱状历史注明是最近 10 次采样的变化。
+ - 新增网速有双行圆点、双行箭头、单行三种样式，绿色上传、蓝色下载，带完整单位。
+ - 新增鼠标悬停在菜单栏图标上显示完整读数。
+ - 新增菜单栏布局：每项独立（每个指标一个图标，点击弹出该项的窄详情）或合并为一个（点击打开主窗口）。每个详情里显示哪些区块可以在设置中逐个勾选。
+ - 新增详情弹窗：CPU（负载历史、各核心、处理器信息、高占用进程）、内存（使用历史、内存构成与释放内存、高占用进程）、GPU、温度与风扇（各组温度、风扇转速与快捷模式）。
+ - 新增网络详情：上下镜像的流量历史；连接探测格子（每 1 / 2 / 5 秒 ping 一次 Cloudflare、Google、阿里云、腾讯或路由器，显示延迟、抖动、丢包）；接口、物理地址、Wi-Fi 信号与速率、VPN / 代理；本地 IPv4 / IPv6、路由器、公网 IPv4 / IPv6，点击即可拷贝；归属地显示 SVG 国旗、城市、ASN 与网络运营方；各进程上传下载速率。
+ - 新增DNS：显示正在使用的 DNS 与配置方式，一键刷新 DNS 缓存，一键切换为自动、Cloudflare、Google、腾讯 DNSPod、阿里云，或手动填写地址（逐个校验为 IPv4 / IPv6）。流量经过 VPN / 代理时提示 DNS 可能被接管。
+
+ 还有 26 项 →
+
+
+
+
查看完整更新日志 →
+
+
常见问题
+
+ 会不会很耗电？
+ 只显示菜单栏时只采集菜单栏用到的指标，M5 Max 实测约 0.3% CPU、16 MB 内存；锁屏、屏幕休眠和系统睡眠时暂停采样与探测。
+
+
+ 辅助工具是做什么的，安全吗？
+ 调风扇、合盖不睡眠、刷新 DNS、修改 DNS 服务器和释放内存需要系统权限，由一个通过 SMAppService 注册的辅助工具完成。它只提供这几个固定操作，不执行任意命令，DNS 地址会再次校验；只接受同一开发团队签名的 OpenStats 调用，应用退出时自动恢复风扇与睡眠设置。
+
+
+ 会联网吗？
+ 只有两项可关闭的功能会：打开网络详情时向 ipinfo.io 查询一次公网地址、归属地与 ASN（10 分钟内不重复）；连接探测按你设定的间隔 ping 你选择的目标。没有账号，没有统计上报。
+
+
+ 为什么不上 App Store？
+ App Store 的沙盒不允许访问 SMC、读取其他应用的缓存和安装特权辅助工具，而这正是大部分功能。
+
+
+ 清理会不会删掉重要文件？
+ 只清理白名单目录中的缓存与日志，钥匙串、密码管理器、VPN、Cookie、历史记录一律不碰；清理前可以展开查看每一项，下载目录中的内容会先移到废纸篓。
+
+
+ 支持 Intel Mac 吗？
+ 目前在 Apple Silicon 上开发和测试，Intel 机型的风扇与温度读取尚未验证。
+
+
${label}${value}
`;
+ const copyable = (text) => ``;
+ const tempTone = (t) => (t >= 80 ? "op-chip--warning" : "op-chip--primary");
+ const level = (v) => (v < 0.3 ? "低负载" : v < 0.7 ? "中等负载" : "高负载");
+ const loadRing = (v) => (v >= 0.85 ? "ring-error" : v >= 0.6 ? "ring-warning" : "ring-primary");
+
+ function procRows(list, cols) {
+ return `${list.map((p) => `
${esc(p.name)}${cols.map((c) => `${c(p)}`).join("")}
`).join("")}
${ringSVG(S.cpu, 56, 6, loadRing(S.cpu))}
${pct(S.cpu)}
+
用户 ${Math.round(S.cpu * 72)}%系统 ${Math.round(S.cpu * 28)}%空闲 ${pct(1 - S.cpu)}
+
${Math.round(S.cpuTemp)}°C${coreBars}
超级核 · 6性能核 · 12
`);
+ const info = card("处理器信息", row("处理器", "Apple M5 Max") + row("核心", "18 核（6 超级核 + 12 性能核）") + row("负载平均", `${(S.cpu * 18).toFixed(2)} · ${(S.cpu * 16).toFixed(2)} · ${(S.cpu * 15).toFixed(2)}`) + row("已运行", "3 天 4 小时"));
+ const procs = card(`高占用进程 CPU`, procRows([...PROCESSES].sort((a, b) => b.cpu - a.cpu).slice(0, 5), [cpuText]));
+ return wide ? `${hero}${history}${coresCard}${info}
${procs}` : hero + history + coresCard + info + procs;
+ },
+
+ mem(wide) {
+ const used = S.mem * 64;
+ const hero = `${ringSVG(S.mem, 56, 6, "ring-success")}
${pct(S.mem)}
+
${used.toFixed(1)} GB/ 64.0 GB内存压力 正常
`;
+ const breakdown = card("内存构成", stack + parts.map(([cls, t, gb]) => `${t}${gb < 1 ? "12.8 MB" : `${gb.toFixed(1)} GB`}
`).join("")
+ + ``);
+ const procs = card(`高占用进程 内存`, procRows([...PROCESSES].sort((a, b) => b.mem - a.mem).slice(0, 5), [memText]));
+ return wide ? `${hero}${history}${breakdown}${procs}
` : hero + history + breakdown + procs;
+ },
+
+ net(wide) {
+ const hero = ``;
+ const history = card(`流量历史 最近 60 秒`,
+ `峰值 ↑ ${rate(Math.max(...S.upHistory, 64 * 1024))}${mirroredSVG(S.upHistory, S.downHistory, { w: wide ? 600 : 296, h: wide ? 120 : 72 })}峰值 ↓ ${rate(Math.max(...S.downHistory, 64 * 1024))}
`);
+
+ const count = wide ? 120 : 60;
+ const recent = S.probes.slice(-count);
+ const cells = fill(count - recent.length, () => '').join("")
+ + recent.map((v) => `= 200 ? "is-slow" : "is-ok"}">`).join("");
+ const ok = recent.filter((v) => v != null);
+ const jitter = ok.slice(-20).reduce((a, v, i, arr) => (i ? a + Math.abs(v - arr[i - 1]) : a), 0) / Math.max(1, Math.min(ok.length, 20) - 1);
+ const loss = recent.length ? recent.filter((v) => v == null).length / recent.length : 0;
+ const last = [...recent].reverse().find((v) => v != null);
+ const probe = card(`连接探测 1.1.1.1 · 每 2 秒`,
+ `${cells}
+ 延迟${last ? Math.round(last) : "—"} ms
抖动${jitter.toFixed(1)} ms
丢包${Math.round(loss * 100)}%
中国 · Shanghai')
+ + row("ASN", copyable("AS64500")) + row("网络运营方", "EXAMPLE NETWORK"));
+
+ const current = DNS_PRESETS.find(([id]) => id === S.dns);
+ const servers = S.dns === "auto" ? "192.168.1.1" : current[2].join("
");
+ const chips = DNS_PRESETS.map(([id, title, , short]) => ``).join("")
+ + ``;
+ const manual = S.dnsManual ? `` : "";
+ const dns = card(`DNS Wi‑Fi`,
+ row("正在使用", servers) + row("配置方式", S.dns === "auto" ? "自动（由路由器分配）" : current[1])
+ + `${chips}
${manual}
+
+ ${S.dnsNote ? `${esc(S.dnsNote)}
` : ""}`);
+
+ const procs = card(`高占用进程 下载 · 上传`,
+ procRows([...NET_PROCESSES].sort((a, b) => b.down + b.up - a.down - a.up), [(p) => rate(p.down), (p) => rate(p.up)]));
+ return wide
+ ? `${hero}${history}${probe}
${iface}${addresses}
${dns}${procs}
`
+ : hero + history + probe + iface + addresses + dns + procs;
+ },
+
+ gpu(wide) {
+ const hero = `${ringSVG(S.gpu, 56, 6, loadRing(S.gpu))}
${pct(S.gpu)}
+
Apple M5 Max
+
${Math.round(S.gpuTemp)}°C${t}${Math.round(v)}°C
`).join("");
+ const fans = S.fans.map((rpm, i) => `风扇 ${i + 1}${rpm.toLocaleString("en-US")} RPM
`).join("");
+ const modes = [["auto", "自动"], ["cool", "降温"], ["max", "强冷"]].map(([m, t]) => ``).join("");
+ return `${Math.round(S.cpuTemp)}°C
${Math.max(...S.fans).toLocaleString("en-US")}RPM
${modes}
`);
+ },
+ };
+
+ const ITEM_META = {
+ cpu: ["CPU", ICON.cpu], mem: ["内存", ICON.mem], net: ["网络", ICON.net], gpu: ["GPU", ICON.gpu], temp: ["温度", ICON.temp],
+ };
+
+ // ── 菜单栏与详情弹窗 ───────────────────────────────────────
+ const itemsBox = document.getElementById("mbItems");
+ const popover = document.getElementById("osPopover");
+
+ /** 按钮保持不变，只替换里面的读数：刷新时整个按钮被替换会让恰好落在刷新瞬间的点击丢失 */
+ function renderMenubar() {
+ if (!itemsBox) return;
+ const items = ITEM_ORDER.filter((k) => S.items.includes(k));
+ const keys = items.length ? items : ["window"];
+ const current = [...itemsBox.children].map((b) => b.dataset.item || "window");
+ if (current.join() !== keys.join()) {
+ itemsBox.innerHTML = keys.map((key) => key === "window"
+ ? ``
+ : ``).join("");
+ }
+ [...itemsBox.children].forEach((button, index) => {
+ const key = keys[index];
+ if (key === "window") { button.innerHTML = ICON.dash; return; }
+ const awake = index === 0 && S.keepAwake ? `${ICON.cup}` : "";
+ button.innerHTML = awake + itemHTML(key, S.style);
+ button.setAttribute("aria-expanded", String(S.popover === key));
+ });
+ }
+
+ function renderPopover() {
+ if (!S.popover) { popover.hidden = true; return; }
+ const [title, icon] = ITEM_META[S.popover];
+ const previous = popover.querySelector(".op-popbody");
+ const scroll = previous && previous.dataset.item === S.popover ? previous.scrollTop : 0;
+ popover.innerHTML = `${icon}${title}
+
+
+ ${CONTENT[S.popover](false)}
`;
+ popover.hidden = false;
+ popover.querySelector(".op-popbody").scrollTop = scroll;
+ placePopover();
+ }
+
+ function placePopover() {
+ const anchor = itemsBox.querySelector(`[data-item="${S.popover}"]`);
+ if (!anchor) return;
+ const margin = 8;
+ const width = Math.min(320, window.innerWidth - margin * 2);
+ const rect = anchor.getBoundingClientRect();
+ const left = clamp(rect.left + rect.width / 2 - width / 2, margin, window.innerWidth - width - margin);
+ popover.style.left = `${left}px`;
+ popover.style.width = `${width}px`;
+ }
+
+ function openPopover(key) {
+ S.popover = S.popover === key ? null : key;
+ renderMenubar();
+ renderPopover();
+ }
+ function closePopover() {
+ if (!S.popover) return;
+ S.popover = null;
+ renderMenubar();
+ renderPopover();
+ }
+
+ // ── 主窗口 ────────────────────────────────────────────────
+ const appWindow = document.getElementById("osWindow");
+ const PAGES = [
+ ["监控", [["overview", "仪表盘", ICON.dash], ["cpu", "CPU", ICON.cpu], ["gpu", "GPU", ICON.gpu], ["mem", "内存", ICON.mem], ["net", "网络", ICON.net], ["temp", "温度与风扇", ICON.fan]]],
+ ["工具", [["processes", "进程", ICON.list], ["keepAwake", "防休眠", ICON.cup], ["cleaner", "清理", ICON.clean]]],
+ ];
+ const pageTitle = (id) => PAGES.flatMap(([, list]) => list).find(([p]) => p === id)[1];
+
+ function overviewPage() {
+ const maxFan = Math.max(...S.fans);
+ const fanPct = Math.round((S.fans[0] / FAN_RANGE[0][1] + S.fans[1] / FAN_RANGE[1][1]) / 2 * 100);
+ const cores = S.cores.slice(12).concat(S.cores.slice(0, 12));
+ const coreBars = cores.map((v, i) => `${i === 6 ? '' : ""}`).join("");
+ const fanModes = [["auto", "自动"], ["cool", "降温"], ["max", "强冷"]].map(([m, t]) =>
+ ``).join("");
+
+ return `
+
+ ${ICON.apple} M5 Max64 GBmacOS 27.0
+ 已运行 3 天 4 小时MacBook Pro 16 英寸
+
+
+ ${card(`CPU
${Math.round(S.cpuTemp)}°C`,
+ `
${Math.round(S.cpu * 100)}%
${barsSVG(S.cpuHistory)}`)}
+ ${card(`GPU
${Math.round(S.gpuTemp)}°C`,
+ `
${Math.round(S.gpu * 100)}%
${lineSVG(S.gpuHistory, { cls: "secondary" })}`)}
+ ${card(`内存
压力 正常`,
+ `
${Math.round(S.mem * 100)}%
${lineSVG(S.memHistory)}`)}
+
+ ${card(`磁盘
2 TB`,
+ `
16%
`)}
+ ${card(`网络
Wi‑Fi`,
+ `
${splitRate(S.up + S.down)}
${dualSVG(S.upHistory, S.downHistory)}`)}
+ ${card(`风扇
转速 ${fanPct}%`,
+ `
${maxFan.toLocaleString("en-US")}RPM
${fanModes}
`)}
+
+ ${card(`核心负载
用户 ${Math.round(S.cpu * 72)}%系统 ${Math.round(S.cpu * 28)}%`,
+ `
${coreBars}
超级核 · 6性能核 · 12
`)}
+ ${card(`电池
健康 100%`,
+ `
${ringSVG(1, 56, 6, "ring-success")}
`)}
+
+ ${card(`高占用进程 CPU · 内存`, procRows([...PROCESSES].sort((a, b) => b.cpu - a.cpu).slice(0, 5), [cpuText, memText]))}
+ ${card("快捷开关", `
+
+
+ `)}
+
`;
+ }
+
+ function processesPage() {
+ const list = [...PROCESSES].sort((a, b) => (S.sort === "cpu" ? b.cpu - a.cpu : b.mem - a.mem));
+ return `
+
+
+
+ ${card(`进程 占用最高的 ${list.length} 个`, procRows(list, [cpuText, memText]))}
+ `;
+ }
+
+ function thermalPage() {
+ const temps = [["CPU", S.cpuTemp], ["GPU", S.gpuTemp], ["内存", S.memTemp], ["电池", S.batteryTemp], ["掌托", S.palmTemp]]
+ .map(([t, v]) => ``).join("");
+ const fans = S.fans.map((rpm, i) => {
+ const [lo, hi] = FAN_RANGE[i];
+ return ``;
+ }).join("");
+ const modes = [["auto", "自动"], ["cool", "降温"], ["max", "强冷"], ["custom", "自定义"]]
+ .map(([m, t]) => ``).join("");
+ return `
+ ${card(`温度
41 个传感器`, temps)}
+ ${card(`风扇
${S.fanMode === "auto" ? "系统自动" : "OpenStats 控制"}`,
+ `${fans}
${modes}
`)}
+
+
模式
${modes}
持续时间
${durations}
+
+
合盖后继续运行
+
+
${ICON.warn}合盖运行时散热变差，请勿放入包中。使用电池且电量低于 20% 时会自动关闭。
+
+
+
+ ${r.title}${S.cleaned && r.on ? "无需清理" : r.detail}
+ ${r.blocked || (S.cleaned && r.on) ? "" : bytes(r.size)}
+
`).join(""))).join("");
+
+ let action;
+ if (S.cleaned) {
+ action = `${ICON.check}已释放 ${bytes(CLEAN_RULES.filter((r) => r.on && !r.blocked).reduce((a, r) => a + r.size, 0))}（网页演示，没有删除任何文件）
+ `;
+ } else if (S.confirming) {
+ action = `${ICON.warn}将清理 ${selected.length} 类项目，共 ${bytes(total)}。缓存与日志直接删除，下载内容移到废纸篓。
+ `;
+ } else {
+ action = `
+
`;
+ }
+
+ return `${card(`磁盘清理 扫描于 刚刚`, `
+ ${bytes(S.cleaned ? 0 : CLEAN_RULES.filter((r) => !r.blocked).reduce((a, r) => a + r.size, 0))}可清理
+
${action}`)}
+ ${groups}
`;
+ }
+
+ const WINDOW_PAGES = {
+ overview: overviewPage, processes: processesPage, keepAwake: keepAwakePage, cleaner: cleanerPage,
+ cpu: () => CONTENT.cpu(true), gpu: () => CONTENT.gpu(true), mem: () => CONTENT.mem(true), net: () => CONTENT.net(true), temp: () => CONTENT.temp(true),
+ };
+
+ function renderWindow() {
+ if (!S.windowOpen) { appWindow.hidden = true; return; }
+ const scroller = appWindow.querySelector(".ow-content");
+ const scroll = scroller ? scroller.scrollTop : 0;
+ const nav = PAGES.map(([group, list]) => `${group}
` + list.map(([id, title, icon]) =>
+ ``).join("")).join("");
+ const toggle = ITEM_META[S.page]
+ ? `在菜单栏显示`
+ : "";
+ appWindow.innerHTML = `
+
+
+
+ ${WINDOW_PAGES[S.page]()}
+ `;
+ appWindow.hidden = false;
+ appWindow.querySelector(".ow-content").scrollTop = scroll;
+ }
+
+ function openWindow(page) {
+ if (page) S.page = page;
+ S.windowOpen = true;
+ closePopover();
+ renderWindow();
+ document.getElementById("dockOpenStats")?.classList.add("dock__item--running");
+ }
+
+ // ── 交互 ──────────────────────────────────────────────────
+ function handle(target, event) {
+ const d = target.dataset;
+ if (d.copy) {
+ navigator.clipboard?.writeText(d.copy).catch(() => {});
+ target.textContent = "已拷贝";
+ target.classList.add("is-copied");
+ setTimeout(() => { target.textContent = d.copy; target.classList.remove("is-copied"); }, 1200);
+ return false;
+ }
+ if (d.item) { event.stopPropagation(); openPopover(d.item); return false; }
+ if (d.page) S.page = d.page;
+ if (d.fan) S.fanMode = d.fan;
+ if (d.sort) S.sort = d.sort;
+ if (d.awakeMode) S.awakeMode = d.awakeMode;
+ if (d.duration !== undefined) S.duration = Number(d.duration);
+ if (d.dns) { S.dns = d.dns; S.dnsManual = false; S.dnsNote = "网页演示：没有修改你电脑的 DNS。"; }
+ if (d.rule) { const r = CLEAN_RULES.find((x) => x.id === d.rule); r.on = !r.on; S.confirming = false; }
+ switch (d.action) {
+ case "theme": window.OpenStatsSite?.toggleTheme(); break;
+ case "settings": closePopover(); document.getElementById("styles").scrollIntoView(); return false;
+ case "window": openWindow(S.popover === "temp" ? "temp" : S.popover || null); return false;
+ case "window-close": S.windowOpen = false; renderWindow(); return false;
+ case "menubar-item": {
+ S.items = S.items.includes(S.page) ? S.items.filter((k) => k !== S.page) : [...S.items, S.page];
+ write("os-items", S.items.join(","));
+ break;
+ }
+ case "dns-manual": S.dnsManual = !S.dnsManual; break;
+ case "flush": S.dnsNote = "DNS 缓存已刷新（网页演示）"; break;
+ case "lookup": S.dnsNote = ""; break;
+ case "purge": target.textContent = "已释放 1.2 GB（网页演示）"; target.disabled = true; return false;
+ case "awake": S.keepAwake = !S.keepAwake; if (!S.keepAwake) S.lidClosed = false; break;
+ case "lid": S.lidClosed = !S.lidClosed; if (S.lidClosed) S.keepAwake = true; break;
+ case "clean": S.confirming = true; break;
+ case "cancel": S.confirming = false; break;
+ case "confirm": S.confirming = false; S.cleaning = true; setTimeout(() => { S.cleaning = false; S.cleaned = true; renderWindow(); }, 900); break;
+ case "rescan": S.cleaned = false; S.confirming = false; break;
+ }
+ return true;
+ }
+
+ document.addEventListener("click", (event) => {
+ const target = event.target.closest("[data-item], [data-page], [data-fan], [data-sort], [data-awake-mode], [data-duration], [data-dns], [data-rule], [data-action], [data-copy]");
+ const inPopover = popover.contains(event.target);
+ const inWindow = appWindow.contains(event.target);
+ const inBar = itemsBox?.contains(event.target);
+ if (target && (inPopover || inWindow || inBar)) {
+ if (inPopover || inWindow) event.stopPropagation();
+ if (handle(target, event)) { renderMenubar(); renderPopover(); renderWindow(); }
+ return;
+ }
+ if (S.popover && !inPopover) closePopover();
+ });
+
+ document.addEventListener("submit", (event) => {
+ const form = event.target.closest('[data-form="dns"]');
+ if (!form) return;
+ event.preventDefault();
+ const input = form.elements.servers;
+ const parts = input.value.split(/[\s,，]+/).filter(Boolean);
+ const ipv4 = /^(25[0-5]|2[0-4]\d|1?\d?\d)(\.(25[0-5]|2[0-4]\d|1?\d?\d)){3}$/;
+ const valid = parts.length > 0 && parts.length <= 6 && parts.every((p) => ipv4.test(p) || /^[0-9a-f:]+$/i.test(p) && p.includes(":"));
+ S.dnsNote = valid ? `网页演示：会把 DNS 设为 ${parts.join("、")}，没有修改你的电脑。` : "地址格式不正确，只接受 IPv4 / IPv6 地址。";
+ if (valid) S.dnsManual = false;
+ renderPopover();
+ renderWindow();
+ });
+
+ document.addEventListener("keydown", (e) => { if (e.key === "Escape") closePopover(); });
+ window.addEventListener("resize", () => { if (S.popover) placePopover(); });
+ document.getElementById("dockOpenStats")?.addEventListener("click", (e) => { e.stopPropagation(); openWindow(); });
+ document.getElementById("heroOpenWindow")?.addEventListener("click", (e) => { e.stopPropagation(); openWindow("net"); });
+
+ // 按住窗口顶栏或侧边栏顶部拖动（仅桌面宽度）
+ appWindow.addEventListener("pointerdown", (event) => {
+ const handleBar = event.target.closest(".ow-drag");
+ if (!handleBar || event.target.closest("button") || window.innerWidth < 900) return;
+ const start = { x: event.clientX, y: event.clientY, left: appWindow.offsetLeft, top: appWindow.offsetTop };
+ const move = (e) => {
+ appWindow.style.left = `${start.left + e.clientX - start.x}px`;
+ appWindow.style.top = `${Math.max(28, start.top + e.clientY - start.y)}px`;
+ appWindow.style.transform = "none";
+ };
+ const up = () => { window.removeEventListener("pointermove", move); window.removeEventListener("pointerup", up); };
+ window.addEventListener("pointermove", move);
+ window.addEventListener("pointerup", up);
+ });
+
+ // ── 刘海岛、风格选择 ───────────────────────────────────────
+ const bind = (key, fn) => document.querySelectorAll(`[data-bind="${key}"]`).forEach(fn);
+ function renderIsland() {
+ bind("island-cpu", (el) => { el.textContent = `CPU ${pct(S.cpu)} · ${Math.round(S.cpuTemp)}°`; });
+ const tiles = { cpu: [S.cpu, pct(S.cpu)], gpu: [S.gpu, pct(S.gpu)], mem: [S.mem, pct(S.mem)], temp: [S.cpuTemp / 110, `${Math.round(S.cpuTemp)}°`] };
+ for (const [k, [f, text]] of Object.entries(tiles)) {
+ bind(`island-${k}-value`, (el) => { el.textContent = text; });
+ bind(`island-${k}-bar`, (el) => { el.style.width = `${Math.round(clamp(f, 0, 1) * 100)}%`; });
+ }
+ bind("island-up", (el) => { el.textContent = rate(S.up); });
+ bind("island-down", (el) => { el.textContent = rate(S.down); });
+ bind("island-fan", (el) => { el.textContent = `风扇 ${Math.max(...S.fans).toLocaleString("en-US")} RPM`; });
+ }
+
+ const picker = document.getElementById("stylePicker");
+ if (picker) {
+ picker.innerHTML = STYLES.map(([id, title]) =>
+ ``).join("");
+ }
+ function renderStyles() {
+ if (!picker) return;
+ picker.querySelectorAll("[data-style]").forEach((chip) => chip.setAttribute("aria-checked", String(chip.dataset.style === S.style)));
+ const preview = ["cpu", "mem", "gpu"].map((k) => `${itemHTML(k, S.style)}`).join("");
+ document.getElementById("stylePreviewLight").innerHTML = preview;
+ document.getElementById("stylePreviewDark").innerHTML = preview;
+ document.getElementById("styleCaption").textContent = STYLES.find(([id]) => id === S.style)[2];
+ }
+ picker?.addEventListener("click", (e) => {
+ const chip = e.target.closest("[data-style]");
+ if (!chip) return;
+ S.style = chip.dataset.style;
+ write("os-style", S.style);
+ renderStyles();
+ renderMenubar();
+ });
+
+ const island = document.getElementById("island");
+ const setIsland = (open) => {
+ island.classList.toggle("is-open", open);
+ island.setAttribute("aria-expanded", String(open));
+ island.querySelector(".island__expanded").setAttribute("aria-hidden", String(!open));
+ };
+ island.addEventListener("mouseenter", () => setIsland(true));
+ island.addEventListener("mouseleave", () => setIsland(false));
+ island.addEventListener("click", (e) => { e.stopPropagation(); setIsland(!island.classList.contains("is-open")); });
+
+ // ── 循环 ──────────────────────────────────────────────────
+ const reduced = window.matchMedia("(prefers-reduced-motion: reduce)").matches;
+ const editing = (el) => el.contains(document.activeElement) && document.activeElement.matches("input");
+ // 按下后 1 秒内不重绘：触屏没有悬停状态，按下与抬起之间换掉按钮会让点击落空
+ let holdUntil = 0;
+ for (const el of [popover, appWindow]) {
+ el.addEventListener("pointerdown", () => { holdUntil = Date.now() + 1000; }, true);
+ }
+ const busy = (el) => Date.now() < holdUntil || el.matches(":hover") || editing(el);
+ function frame() {
+ tick();
+ renderMenubar();
+ renderIsland();
+ renderStyles();
+ if (S.popover && !busy(popover)) renderPopover();
+ if (S.windowOpen && !busy(appWindow)) renderWindow();
+ }
+ frame();
+ if (!reduced) setInterval(frame, 1500);
+})();
diff --git a/web/styles.css b/web/styles.css
new file mode 100644
index 0000000..b4c91d7
--- /dev/null
+++ b/web/styles.css
@@ -0,0 +1,272 @@
+/* OpenStats 官网 · 页面基础与介绍区
+ 所有颜色、字号、间距、圆角与阴影都从下面的 token 取值。 */
+
+:root {
+ color-scheme: light dark;
+
+ /* 品牌与语义色 */
+ --color-primary: #2563eb;
+ --color-primary-hover: #1d4ed8;
+ --color-secondary: #0d9488;
+ --color-success: #16a34a;
+ --color-warning: #d97706;
+ --color-error: #dc2626;
+
+ /* 中性色 */
+ --color-neutral-50: #f8f9fa;
+ --color-neutral-100: #f3f4f6;
+ --color-neutral-200: #e5e7eb;
+ --color-neutral-300: #d1d5db;
+ --color-neutral-400: #9ca3af;
+ --color-neutral-500: #6b7280;
+ --color-neutral-700: #374151;
+ --color-neutral-800: #1f2937;
+ --color-neutral-900: #111827;
+
+ --color-bg: #f8f9fa;
+ --color-bg-alt: #ffffff;
+ --color-surface: #ffffff;
+ --color-border: #e5e7eb;
+ --color-text: #111827;
+ --color-text-secondary: #6b7280;
+ --color-text-tertiary: #9ca3af;
+ --color-on-primary: #ffffff;
+
+ /* 字号 */
+ --text-xs: 12px;
+ --text-sm: 14px;
+ --text-base: 16px;
+ --text-lg: 20px;
+ --text-xl: 24px;
+ --text-2xl: 32px;
+
+ /* 间距（4px 栅格） */
+ --space-1: 4px;
+ --space-2: 8px;
+ --space-3: 12px;
+ --space-4: 16px;
+ --space-6: 24px;
+ --space-8: 32px;
+ --space-12: 48px;
+ --space-16: 64px;
+
+ /* 圆角：控件 < 卡片 < 窗口 */
+ --radius-sm: 4px;
+ --radius-md: 8px;
+ --radius-lg: 12px;
+ --radius-xl: 16px;
+
+ /* 阴影（全站只用两级） */
+ --shadow-1: 0 1px 3px rgba(0, 0, 0, 0.08);
+ --shadow-2: 0 4px 12px rgba(0, 0, 0, 0.1);
+
+ --shell: 1120px;
+ --narrow: 760px;
+ --font: -apple-system, BlinkMacSystemFont, "SF Pro Text", "PingFang SC", "Helvetica Neue", Arial, sans-serif;
+ --font-mono: "SF Mono", ui-monospace, Menlo, monospace;
+}
+
+:root[data-theme="dark"] {
+ --color-primary: #3b82f6;
+ --color-primary-hover: #2563eb;
+ --color-secondary: #2dd4bf;
+ --color-success: #22c55e;
+ --color-warning: #f59e0b;
+ --color-error: #f87171;
+ --color-bg: #111315;
+ --color-bg-alt: #16181c;
+ --color-surface: #1d1f23;
+ --color-border: #2c2f35;
+ --color-text: #f3f4f6;
+ --color-text-secondary: #9ca3af;
+ --color-text-tertiary: #6b7280;
+ --shadow-1: 0 1px 3px rgba(0, 0, 0, 0.3);
+ --shadow-2: 0 4px 12px rgba(0, 0, 0, 0.4);
+}
+
+*, *::before, *::after { box-sizing: border-box; }
+
+html { scroll-behavior: smooth; }
+
+body {
+ margin: 0;
+ font-family: var(--font);
+ font-size: var(--text-base);
+ font-weight: 400;
+ line-height: 1.5;
+ color: var(--color-text);
+ background: var(--color-bg);
+ -webkit-font-smoothing: antialiased;
+}
+
+img { max-width: 100%; display: block; }
+
+a { color: var(--color-primary); text-decoration: none; }
+a:hover { color: var(--color-primary-hover); }
+
+h1, h2, h3 { font-weight: 600; line-height: 1.25; margin: 0; }
+
+p { margin: 0; }
+
+:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 2px; }
+
+@media (prefers-reduced-motion: reduce) {
+ html { scroll-behavior: auto; }
+ *, *::before, *::after { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; }
+}
+
+/* ── 按钮 ─────────────────────────────────────────────── */
+
+.btn {
+ display: inline-flex;
+ align-items: center;
+ justify-content: center;
+ gap: var(--space-2);
+ height: 40px;
+ padding: 0 var(--space-4);
+ border-radius: var(--radius-md);
+ font-size: var(--text-sm);
+ font-weight: 600;
+ border: 1px solid transparent;
+ transition: background-color 0.15s ease, border-color 0.15s ease;
+}
+
+.btn--primary { background: var(--color-primary); color: var(--color-on-primary); }
+.btn--primary:hover { background: var(--color-primary-hover); color: var(--color-on-primary); }
+
+.btn--secondary { background: var(--color-surface); color: var(--color-text); border-color: var(--color-border); }
+.btn--secondary:hover { background: var(--color-neutral-100); color: var(--color-text); }
+:root[data-theme="dark"] .btn--secondary:hover { background: #25282d; }
+
+/* ── 介绍区 ───────────────────────────────────────────── */
+
+.shell { max-width: var(--shell); margin: 0 auto; padding: 0 var(--space-6); }
+.narrow { max-width: var(--narrow); }
+
+.band { padding: var(--space-16) 0; }
+.band--alt { background: var(--color-bg-alt); border-top: 1px solid var(--color-border); border-bottom: 1px solid var(--color-border); }
+
+.section-head { margin-bottom: var(--space-8); }
+.section-head h2 { font-size: var(--text-2xl); }
+.section-head p { margin-top: var(--space-2); color: var(--color-text-secondary); font-size: var(--text-base); }
+
+.feature-grid {
+ list-style: none;
+ margin: 0;
+ padding: 0;
+ display: grid;
+ grid-template-columns: repeat(3, minmax(0, 1fr));
+ gap: var(--space-4);
+}
+
+.feature {
+ padding: var(--space-6);
+ background: var(--color-surface);
+ border: 1px solid var(--color-border);
+ border-radius: var(--radius-lg);
+}
+.feature h3 { font-size: var(--text-base); }
+.feature p { margin-top: var(--space-2); font-size: var(--text-sm); color: var(--color-text-secondary); }
+
+/* 风格选择 */
+.style-picker { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-bottom: var(--space-6); }
+
+.style-chip {
+ height: 36px;
+ padding: 0 var(--space-4);
+ border-radius: var(--radius-md);
+ border: 1px solid var(--color-border);
+ background: var(--color-surface);
+ color: var(--color-text);
+ font: inherit;
+ font-size: var(--text-sm);
+ cursor: pointer;
+}
+.style-chip:hover { border-color: var(--color-neutral-400); }
+.style-chip[aria-checked="true"] { border-color: var(--color-primary); color: var(--color-primary); font-weight: 600; }
+
+.style-preview { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-4); }
+.style-preview__bar {
+ height: 64px;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ border-radius: var(--radius-lg);
+}
+.style-preview__bar--light { background: var(--color-neutral-200); color: #000; }
+.style-preview__bar--dark { background: var(--color-neutral-800); color: #fff; }
+.style-preview__caption { grid-column: 1 / -1; font-size: var(--text-sm); color: var(--color-text-secondary); }
+
+/* 截图 */
+.shots { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-6); align-items: start; }
+.shot { margin: 0; }
+.shot img { border-radius: var(--radius-lg); box-shadow: var(--shadow-2); }
+.shot--popover { max-width: 320px; justify-self: center; }
+.shot--popover img { border-radius: var(--radius-xl); }
+.shot--dark { display: none; }
+:root[data-theme="dark"] .shot--light { display: none; }
+:root[data-theme="dark"] .shot--dark { display: block; }
+.shot figcaption { margin-top: var(--space-3); text-align: center; font-size: var(--text-sm); color: var(--color-text-secondary); }
+
+.split { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-12); align-items: center; }
+.split--reverse .split__text { order: 2; }
+.split__text h2 { font-size: var(--text-2xl); margin-bottom: var(--space-6); }
+.split__text p { margin-top: var(--space-4); color: var(--color-text-secondary); }
+.split__text .note { font-size: var(--text-sm); color: var(--color-text-tertiary); }
+
+.mode-table { width: 100%; border-collapse: collapse; font-size: var(--text-sm); }
+.mode-table th, .mode-table td { text-align: left; padding: var(--space-2) var(--space-3); border-bottom: 1px solid var(--color-border); }
+.mode-table th { color: var(--color-text-secondary); font-weight: 600; }
+
+.check-list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-2); }
+.check-list li { position: relative; padding-left: var(--space-6); }
+.check-list li::before { content: "✓"; position: absolute; left: 0; color: var(--color-success); font-weight: 600; }
+
+.fact-list { list-style: none; margin: 0; padding: 0; border: 1px solid var(--color-border); border-radius: var(--radius-lg); background: var(--color-surface); }
+.fact-list li { display: grid; grid-template-columns: 120px 1fr; gap: var(--space-4); padding: var(--space-3) var(--space-4); border-top: 1px solid var(--color-border); font-size: var(--text-sm); }
+.fact-list li:first-child { border-top: 0; }
+.fact-list b { font-weight: 600; }
+.fact-list span { color: var(--color-text-secondary); }
+
+.download { text-align: center; display: flex; flex-direction: column; align-items: center; gap: var(--space-4); }
+.download h2 { font-size: var(--text-2xl); }
+.download p { color: var(--color-text-secondary); }
+
+/* 更新日志（由 Scripts/sync_changelog.py 生成） */
+.log { display: grid; gap: var(--space-4); }
+.log__day { padding: var(--space-6); background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-lg); }
+.log__head { display: flex; align-items: center; gap: var(--space-3); }
+.log__head time { font-weight: 600; }
+.log__tag { font-size: var(--text-xs); padding: 0 var(--space-2); border-radius: var(--radius-sm); background: var(--color-neutral-100); color: var(--color-text-secondary); }
+:root[data-theme="dark"] .log__tag { background: #25282d; }
+.log__counts { margin-top: var(--space-1); font-size: var(--text-xs); color: var(--color-text-tertiary); }
+.log__list { margin: var(--space-3) 0 0; padding-left: var(--space-4); font-size: var(--text-sm); color: var(--color-text-secondary); display: grid; gap: var(--space-2); }
+.log__kind { display: inline-block; margin-right: var(--space-2); font-size: var(--text-xs); font-weight: 600; color: var(--color-primary); }
+.log__list code { font-family: var(--font-mono); font-size: var(--text-xs); }
+.log__more { display: inline-block; margin-top: var(--space-3); font-size: var(--text-sm); }
+.log__all { margin-top: var(--space-6); font-size: var(--text-sm); }
+
+.faq { border-bottom: 1px solid var(--color-border); padding: var(--space-4) 0; }
+.faq summary { cursor: pointer; font-weight: 600; list-style: none; }
+.faq summary::-webkit-details-marker { display: none; }
+.faq summary::after { content: "+"; float: right; color: var(--color-text-tertiary); }
+.faq[open] summary::after { content: "−"; }
+.faq p { margin-top: var(--space-3); color: var(--color-text-secondary); font-size: var(--text-sm); }
+
+.footer { padding: var(--space-8) 0; border-top: 1px solid var(--color-border); }
+.footer__inner { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-3); }
+.footer__brand { display: inline-flex; align-items: center; gap: var(--space-2); font-weight: 600; }
+.footer__fine { font-size: var(--text-xs); color: var(--color-text-tertiary); }
+
+@media (max-width: 900px) {
+ .feature-grid { grid-template-columns: 1fr 1fr; }
+ .split, .shots { grid-template-columns: 1fr; }
+ .split--reverse .split__text { order: 0; }
+}
+
+@media (max-width: 600px) {
+ .band { padding: var(--space-12) 0; }
+ .feature-grid, .style-preview { grid-template-columns: 1fr; }
+ .section-head h2, .split__text h2, .download h2 { font-size: var(--text-xl); }
+ .fact-list li { grid-template-columns: 1fr; gap: var(--space-1); }
+}