/**
 * MythosX 设计系统：令牌、外壳、通用组件。
 *
 * 业务定位：官网所有页面共用这一份，首页原型（design-proposal/hero-proto/site.css）里验证过的样式抽到这里。
 * 各页只在自己的 page-*.css 里写页面特有的版式，令牌、顶栏、页脚、按钮、卡片一律从这里取；
 * 顶栏高度、字标位置、页面底色必须五站逐像素一致，站间是跨源跳转，不一致就是一次肉眼可见的跳动。
 *
 * 取舍：
 *   - 只有一个强调色，取自 X 刀口的暖光；状态色只进状态标签，不进任何装饰；
 *   - 动效只用不过冲的减速曲线，页面上没有回弹；
 *   - 标题用思源宋：X 的粗细两笔来自高反差衬线，宋体的横细竖粗是同一种笔画逻辑；
 *   - 导航不加边框和底色（Owner 11-02：加了边框更丑）；11-11 去油后悬停也不再亮浅色胶囊，只提字色；
 *   - 去油（Owner 11-10）：组件不用渐变、投影、内高光、小圆点、角标框，质感只靠发丝细线、字重字色和对齐；
 *     页头光晕、页脚字标渐隐这类页面层氛围光暂留，等 Owner 定。
 */

@font-face { font-family: "Inter"; font-style: normal; font-weight: 100 900; font-display: swap; src: url("fonts/inter-normal-latin.woff2") format("woff2"); }
@font-face { font-family: "JetBrains Mono"; font-style: normal; font-weight: 100 800; font-display: swap; src: url("fonts/jetbrains-mono-normal-latin.woff2") format("woff2"); }
/* 标题字子集：按官网、下载站、换卡站各页实际渲染出来的标题字裁出（三站同一份）。改了标题文字就要重裁：
   起好预览服务后运行 node design-proposal/site-kit/fonts_sweep.mjs rebuild --base http://127.0.0.1:<端口> --out <临时目录>
   （收字、裁字、复验一条命令，见该脚本头注释）。本机装了 Noto Serif SC，缺的字会无缝回退，截图看不出来，以复验结果为准 */
@font-face { font-family: "MythosX Display"; font-style: normal; font-weight: 500; font-display: swap; src: url("fonts/display-500.woff2") format("woff2"); }

:root {
  color-scheme: dark;
  --bg: #060607;
  --surface: #0d0d0f;
  --surface-2: #141417;
  --surface-3: #1a1a1e;
  --line: rgba(240, 238, 233, .085);
  --line-2: rgba(240, 238, 233, .17);
  --text: #f0eee9;
  --text-2: #a7a59e;
  --text-3: #74726c;
  --accent: #e8c493;          /* 刀口暖光，全站唯一强调色 */
  --accent-rgb: 232, 196, 147;
  --ink-rgb: 240, 238, 233;
  --ok: #63c08f;
  --warn: #d9b25f;
  --down: #de6b5e;
  --bar-h: 64px;
  --gutter: clamp(20px, 4vw, 56px);
  /* 版心 1280 起步，2000 宽以上随视口放到 1520：2560 屏上 1280 只占半屏 */
  --wrap: clamp(1280px, 62vw, 1520px);
  --ease: cubic-bezier(.2, 0, 0, 1);
  --sans: "Inter", "PingFang SC", "HarmonyOS Sans SC", "MiSans", "Microsoft YaHei", system-ui, sans-serif;
  --display: "MythosX Display", "Noto Serif SC", "Songti SC", "STSong", serif;
  /* 等宽字体没有汉字：中文标签要落到黑体，不能落到系统等宽，否则字距会发散 */
  --mono: "JetBrains Mono", "PingFang SC", "HarmonyOS Sans SC", "MiSans", "Microsoft YaHei", ui-monospace, monospace;
}

*, *::before, *::after { box-sizing: border-box; }
html { background: var(--bg); scroll-behavior: smooth; scroll-padding-top: calc(var(--bar-h) + 24px); scrollbar-gutter: stable; scrollbar-color: #2c2c30 transparent; -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--bg); color: var(--text); font: 400 16px/1.75 var(--sans); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; overflow-x: clip; }
h1, h2, h3, h4, h5, p, ul, ol, dl, dd, figure { margin: 0; padding: 0; }
ul, ol { list-style: none; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
img, canvas, svg { display: block; }
img { max-width: 100%; height: auto; }
[hidden] { display: none !important; }
::selection { background: rgba(var(--accent-rgb), .28); }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 4px; }
.wrap { width: min(100%, calc(var(--wrap) + var(--gutter) * 2)); margin-inline: auto; padding-inline: var(--gutter); }
.nw { white-space: nowrap; }   /* 中英混排的词组不许从中间折行 */
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* 顶栏 ------------------------------------------------------------------ */
.bar { position: fixed; inset: 0 0 auto; z-index: 50; height: var(--bar-h); border-bottom: 1px solid transparent; transition: background-color .3s var(--ease), border-color .3s var(--ease); }
/* 顶栏用实色不用毛玻璃：白色主按钮滑到底下时，模糊后会在字标背后糊成一块灰斑 */
.bar.is-solid { background: var(--bg); border-color: var(--line); }
.bar-in { height: 100%; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 24px; }
.brand { justify-self: start; display: inline-flex; color: var(--text); }
.wordmark { width: auto; height: 24px; flex: none; }
/* 下拉带折角、外链带 ↗；同一行的控件一律 36px 高。
   去油（11-11，官网与下载站共用外壳）：悬停、展开时不再亮浅色胶囊底，也不变暖金，只把字提到 --text；
   36px 高与圆角保留，只是不再绘制底色，所以版面不动 */
.links { display: flex; align-items: center; gap: 4px; font-size: 14px; color: var(--text-2); }
.links a, .nav-btn { display: inline-flex; align-items: center; gap: 6px; height: 36px; padding: 0 14px; border-radius: 999px; transition: color .2s var(--ease), background-color .2s var(--ease); }
.links a:hover, .nav-btn:hover, .nav-btn[aria-expanded="true"] { color: var(--text); }
.links a[aria-current="page"] { color: var(--text); }
.chev { width: 10px; height: 10px; fill: none; stroke: currentColor; stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; opacity: .55; transition: transform .25s var(--ease); }
.nav-btn[aria-expanded="true"] .chev { transform: rotate(180deg); }
.ext { font-style: normal; font-size: 12px; color: var(--text-3); transition: color .2s var(--ease); }
.links a:hover .ext { color: var(--text); }
.bar.is-menu { background: #0a0a0c; border-color: var(--line); }

/* 菜单面板：一张全宽的板，切换菜单时只有高度在变。不用弹性曲线，收放都是干脆的减速 */
.sheet { position: absolute; top: 100%; left: 0; right: 0; height: 0; overflow: hidden; visibility: hidden; opacity: 0; background: #0a0a0c; border-bottom: 1px solid var(--line); transition: height .3s var(--ease), opacity .2s var(--ease), visibility 0s linear .3s; }
.sheet.is-open { visibility: visible; opacity: 1; transition: height .3s var(--ease), opacity .16s var(--ease), visibility 0s; }
.sheet .wrap { position: relative; }
.panel { position: absolute; left: var(--gutter); right: var(--gutter); top: 0; padding: 28px 0 36px; opacity: 0; visibility: hidden; transition: opacity .18s var(--ease), visibility 0s linear .18s; }
.panel.is-on { opacity: 1; visibility: visible; transition: opacity .24s var(--ease) .06s, visibility 0s; }
.panel-kicker { margin-bottom: 18px; font: 500 13px/1.4 var(--mono); color: var(--text-3); }
.panel-tiles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.panel-tiles a { display: flex; flex-direction: column; justify-content: space-between; gap: 28px; min-height: 112px; padding: 16px 18px; border: 1px solid var(--line); border-radius: 8px; transition: border-color .2s var(--ease); }
/* 菜单卡片去油：不填底色、悬停也不加底，只靠发丝细线由 --line 提到 --line-2 */
.panel-tiles a:hover { border-color: var(--line-2); }
.panel-tiles span { font: 500 12px/1.4 var(--mono); color: var(--text-3); }
.panel-tiles b { font: 500 22px/1.25 var(--display); color: var(--text); }
.panel-cols { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 28px; }
.panel-cols h5 { margin: 0 0 12px; font: 500 12px/1.4 var(--mono); color: var(--text-3); }
/* 菜单链接与待定项：窄屏两栏时会折行，balance 让两行均分，避免末行只剩「定）」这类一两个字（F3 11-11 在下载站菜单 390 宽查出） */
.panel-cols a, .panel-cols .is-pending { display: block; padding: 7px 0; font-size: 14px; line-height: 1.4; color: var(--text-2); text-wrap: balance; transition: color .2s var(--ease), text-decoration-color .2s var(--ease); }
/* 全站悬停规范（四站一致，11-11 主线定）：字色 --text-2 → --text，加 1px 下划线（不透明度 .5，offset 4px）；
   不加底色、不位移、不用暖金。.17 的发丝下划线在深底上看不出来，等于没有反馈，所以提到 .5 */
.panel-cols a:hover { color: var(--text); text-decoration: underline; text-decoration-thickness: 1px; text-decoration-color: rgba(var(--ink-rgb), .5); text-underline-offset: 4px; }
.panel-cols a span { display: block; margin-top: 2px; font-size: 12px; color: var(--text-3); }
.panel-cols .is-pending { color: var(--text-3); }
.menu-toggle { display: none; position: relative; width: 36px; height: 36px; }
.menu-toggle i { position: absolute; left: 9px; right: 9px; top: 50%; height: 1.5px; background: var(--text); transition: transform .25s var(--ease); }
.menu-toggle i:first-child { transform: translateY(-4px); }
.menu-toggle i:last-child { transform: translateY(3px); }
.bar.is-sheet .menu-toggle i:first-child { transform: rotate(45deg); }
.bar.is-sheet .menu-toggle i:last-child { transform: rotate(-45deg); }
html.is-locked { overflow: hidden; }
.tail { justify-self: end; display: flex; align-items: center; gap: 10px; font-size: 14px; color: var(--text-2); }
/* 语言切换：静态写在顶栏里，i18n.js 只负责绑定点击和标记当前语言（is-active），不再在加载后插入，顶栏不跳 */
.lang-switch { display: inline-flex; align-items: center; height: 36px; padding: 0 6px; font: 500 12px/1 var(--mono); letter-spacing: .04em; }
.lang-switch button { height: 36px; padding: 0 6px; color: var(--text-3); transition: color .2s var(--ease); }
.lang-switch button:hover { color: var(--text-2); }
.lang-switch button.is-active, .lang-switch button[aria-pressed="true"] { color: var(--text); }
.lang-switch span { color: rgba(var(--ink-rgb), .2); }

/* 按钮与链接 ------------------------------------------------------------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 48px; padding: 0 26px; border-radius: 8px; font-size: 15px; font-weight: 500; letter-spacing: .01em; white-space: nowrap; transition: background-color .2s var(--ease), border-color .2s var(--ease), color .2s var(--ease); }
.btn-solid { background: var(--text); color: #101012; }
.btn-solid:hover { background: #fff; }
.btn-line { border: 1px solid var(--line-2); color: var(--text); }
/* 次按钮悬停只提边线，不铺浅底（教程页 controls-v2：次按钮透明底、细线） */
.btn-line:hover { border-color: rgba(var(--ink-rgb), .36); }
/* 文字链接去油：悬停不变暖金、箭头不位移（controls-v2：悬停不做位移）；按全站悬停规范，默认 --text-2，悬停提到 --text 加 .5 下划线 */
.link { display: inline-flex; align-items: baseline; gap: 6px; font-size: 15px; font-weight: 500; color: var(--text-2); transition: color .2s var(--ease), text-decoration-color .2s var(--ease); }
.link i { font-style: normal; }
.link:hover { color: var(--text); text-decoration: underline; text-decoration-thickness: 1px; text-decoration-color: rgba(var(--ink-rgb), .5); text-underline-offset: 4px; }
.actions { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; margin-top: 36px; }

/* 字体层级 --------------------------------------------------------------- */
.kicker { font: 500 13px/1.4 var(--mono); letter-spacing: .04em; color: var(--text-3); }
.page-title { margin: 20px 0 22px; font: 500 clamp(44px, 5.4vw, 88px) / 1.06 var(--display); letter-spacing: -.01em; color: var(--text); }
h2, .h2 { margin-top: 16px; font: 500 clamp(32px, 3.6vw, 52px) / 1.2 var(--display); letter-spacing: .005em; color: var(--text); }
h3, .h3 { font: 500 clamp(22px, 2.1vw, 30px) / 1.3 var(--display); color: var(--text); }
/* 标题断行（Owner 11-02 要求中文标题不在词中间断开）：
   text-wrap: balance 让各行长度接近，不留单字孤行；
   ≥641px 再加 keep-all：汉字之间不再是换行点，只在空格和标点处折行，词不会被腰斩；overflow-wrap: anywhere 只在一整段
   无空格无标点的文字比容器还宽时才强制折，不会撑破版心。窄屏（手机）一行只放得下十来个字，整段子句放不下是常态，
   keep-all 会先把子句整个推到下一行再硬切，反而出单字孤行，所以手机上只用 balance。英文标题本来就只在空格处折行，不受影响。 */
h1, h2, h3, .page-title, .h2, .h3 { text-wrap: balance; }
@media (min-width: 641px) { h1, h2, h3, .page-title, .h2, .h3 { word-break: keep-all; overflow-wrap: anywhere; } }
/* 正文和目录条目：text-wrap: pretty 只管最后一行，避免末行只剩一两个字（实测目录里「…层静默生 / 效」） */
p, li, .toc a, figcaption { text-wrap: pretty; }
.lead { max-width: 38em; font-size: clamp(16px, calc(12px + .25vw), 18px); line-height: 1.85; color: #8c8a83; }
.lead b, .lead strong { font-weight: 400; color: var(--text); }
.sub { max-width: 38em; margin-top: 18px; font-size: 17px; color: var(--text-2); }
.body { color: var(--text-2); }
.body strong { font-weight: 500; color: var(--text); }
.ticks { margin-top: 24px; display: grid; gap: 10px; }
.ticks li { position: relative; padding-left: 20px; font-size: 15px; line-height: 1.65; color: var(--text-2); }
.ticks li::before { content: ""; position: absolute; left: 0; top: .78em; width: 9px; height: 1px; background: var(--text-3); }

/* 页面骨架 --------------------------------------------------------------- */
/* 内页首屏：不像首页那样占满一屏，标题区留足呼吸，下面紧跟正文 */
/* 页头下沿不留太多：页头到第一章的整段空白控制在 128px 左右（1440 宽实测原来是 158～200px），
   和章节之间的间距（.sec 的 128px 下内边距）同一量级，读者不会觉得页头和正文是两件事 */
.page-head { position: relative; padding: calc(var(--bar-h) + clamp(64px, 9vw, 140px)) 0 clamp(32px, 4vw, 56px); overflow: clip; }
.page-head::before { content: ""; position: absolute; inset: 0; background: radial-gradient(70% 80% at 78% 0%, rgba(150, 140, 124, .08), transparent 70%); pointer-events: none; }
.page-head > .wrap { position: relative; }
.sec { padding-block: clamp(80px, 8vw, 128px); }
.sec-tight { padding-block: clamp(56px, 6vw, 96px); }
.sec + .sec { padding-top: 0; }
.page-head + .sec, .page-head + .sec-tight { padding-top: clamp(48px, 5vw, 72px); }
.rule { border-top: 1px solid var(--line); }
/* 两栏章节：文 5 图 7，is-flip 镜像；窄屏统一先文后图 */
.chapter-in { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(32px, 5vw, 80px); align-items: center; }
.chapter-in.is-flip { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
.chapter-role { margin: 14px 0 18px; font-size: 18px; color: var(--text); }
.chapter-links { display: flex; flex-wrap: wrap; gap: 28px; margin-top: 28px; }

/* 进场：只用透明度和小位移，不用弹性；无脚本时内容照常可见 */
.js [data-reveal] { opacity: 0; transform: translateY(14px); transition: opacity .7s var(--ease), transform .7s var(--ease); }
.js [data-reveal].is-in { opacity: 1; transform: none; }

/* 动效容器 --------------------------------------------------------------- */
/* 页面里的小动画都放在 .viz 里：比例由页面定，画布铺满；底下垫一片很淡的暖光，动画和页面连成一个空间 */
.viz { position: relative; min-width: 0; }
.viz canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.viz-glow::before { content: ""; position: absolute; inset: 10% 14% 0 0; background: radial-gradient(50% 46% at 50% 62%, rgba(var(--accent-rgb), .08), transparent 72%); pointer-events: none; }
.trace { position: absolute; left: 0; bottom: 0; display: grid; gap: 6px; font: 400 12px/1.5 var(--mono); color: var(--text-3); pointer-events: none; }
.trace div:first-child { color: var(--text-2); }
.trace b { font-weight: 500; color: var(--accent); }

/* 卡片与表格 ------------------------------------------------------------- */
.cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); gap: 20px; }
/* 卡片去油（Owner 11-10「渐变、发光、内高光都算油」）：原先的上亮下暗渐变底和顶部内高光删掉，
   只留发丝细线加中性平底 --surface；盒子尺寸、边框宽度不变，换掉的只有绘制，不引起重排。
   page-service 的 .svc-card、page-anvil 的 .ax-required、status 的 .st-primary、page-janus 的入口卡同用这一种平底 */
.card { display: flex; flex-direction: column; padding: clamp(22px, 2.6vw, 36px); border: 1px solid var(--line); border-radius: 12px; background: var(--surface); transition: border-color .3s var(--ease); }
.card:hover { border-color: var(--line-2); }
.card-head { display: flex; justify-content: space-between; gap: 16px; margin-bottom: 22px; font: 500 12px/1.4 var(--mono); color: var(--text-3); }
.card-head em { font-style: normal; }
.card h3 { margin-bottom: 10px; }
.card p { color: var(--text-2); }
.card-foot { display: flex; gap: 28px; margin-top: auto; padding-top: 24px; }
/* 两列的定义表：左边等宽小字作标签，右边正文 */
.table { border-top: 1px solid var(--line); }
.table > div { display: grid; grid-template-columns: 180px minmax(0, 1fr); gap: 24px; padding: 18px 0; border-bottom: 1px solid var(--line); }
.table dt { font: 500 13px/28px var(--mono); color: var(--text-3); }
.table dd { color: var(--text-2); }
/* 状态标签：状态色只出现在这里 */
.tag { display: inline-flex; align-items: center; gap: 6px; height: 24px; padding: 0 10px; border: 1px solid var(--line-2); border-radius: 999px; font: 500 12px/1 var(--mono); color: var(--text-2); }
.tag.is-ok { color: var(--ok); border-color: rgba(99, 192, 143, .35); }
/* 状态标签的琥珀色（停运、需注意），状态色只出现在标签里，各页共用，不在页面样式里重复定义 */
.tag.is-warn { color: var(--warn); border-color: rgba(217, 178, 95, .35); }
.tag.is-off { color: var(--text-3); }
/* 状态指示：原先是 6px 小圆点（Owner 11-10 算油），改成 10×2px 的短细线，颜色仍按 ok / warn / down 区分；
   旁边本来就有状态文字（mx-shell.js 写入），细线只是色标。比原圆点宽 4px，后面的状态文字随之右移 4px，不换行；
   盒子仍是 6px 高（上下各 2px 透明边框，底色只画在中间 2px 的内容区）：它是首屏信任条 inline-flex 的第一项，
   基线由它的边框盒推出，盒高一变整行就上下移（实测只改成 2px 高时首页 390 宽整页高 1px），所以只改画法不改盒高 */
.dot { box-sizing: border-box; width: 10px; height: 6px; border-block: 2px solid transparent; background: var(--warn); background-clip: content-box; }
.is-ok .dot { background: var(--ok); }
.is-down .dot { background: var(--down); }

/* 页脚 ------------------------------------------------------------------- */
.foot { position: relative; overflow: clip; border-top: 1px solid var(--line); padding-top: clamp(56px, 6vw, 88px); }
.foot-grid { display: grid; grid-template-columns: minmax(0, 2.2fr) repeat(3, minmax(0, 1fr)); gap: 40px; }
.foot-name { display: flex; align-items: center; gap: 8px; }
.foot-name span { font-size: 14px; color: var(--text-3); }
.foot-line { margin-top: 14px; font-size: 14px; color: var(--text-2); }
.foot-note { max-width: 34em; margin-top: 10px; font-size: 13px; line-height: 1.7; color: var(--text-3); }
.foot nav { display: grid; align-content: start; gap: 10px; font-size: 14px; }
.foot h4 { margin-bottom: 6px; font: 500 12px/1.4 var(--mono); color: var(--text-3); }
/* 页脚链接窄屏两栏时会折行，balance 让两行均分，避免末行只剩一两个字（F3 在下载站 390 宽查出孤字，同一外壳） */
.foot nav a { color: var(--text-2); text-wrap: balance; transition: color .2s var(--ease), text-decoration-color .2s var(--ease); }
/* 全站悬停规范：--text-2 → --text，加 1px、不透明度 .5、离字 4px 的下划线（和菜单链接同一写法） */
.foot nav a:hover { color: var(--text); text-decoration: underline; text-decoration-thickness: 1px; text-decoration-color: rgba(var(--ink-rgb), .5); text-underline-offset: 4px; }
.foot-meta { display: flex; justify-content: space-between; align-items: center; margin-top: 56px; font-size: 13px; color: var(--text-3); }
.foot-status { display: inline-flex; align-items: center; gap: 8px; }
/* 沉在页脚的巨大字标：只在最后一屏出现，把品牌留在视线尽头 */
.foot-word { width: min(100%, 1680px); height: auto; margin: 40px auto -7%; padding-inline: var(--gutter); color: rgba(var(--ink-rgb), .1); -webkit-mask-image: linear-gradient(to bottom, #000 30%, transparent 92%); mask-image: linear-gradient(to bottom, #000 30%, transparent 92%); pointer-events: none; }

/* 窄屏 ------------------------------------------------------------------- */
@media (max-width: 960px) {
  .links { display: none; }
  .bar-in { grid-template-columns: 1fr auto; }
  .menu-toggle { display: block; }
  .bar.is-sheet { background: #0a0a0c; border-color: var(--line); }
  /* 窄屏菜单是一张全屏面板，所有分组摊开，不做手风琴 */
  .bar .sheet { display: none; }
  .bar.is-sheet .sheet { display: block; position: fixed; top: var(--bar-h); bottom: 0; height: auto !important; overflow-y: auto; visibility: visible; opacity: 1; background: #0a0a0c; border: 0; overscroll-behavior: contain; }
  .bar.is-sheet .panel { position: static; opacity: 1; visibility: visible; padding: 22px 0 6px; }
  .panel-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .panel-tiles a { min-height: 88px; gap: 16px; padding: 12px 14px; }
  .panel-tiles b { font-size: 18px; }
  .panel-cols { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px 20px; }
  .chapter-in, .chapter-in.is-flip { grid-template-columns: minmax(0, 1fr); }
  .chapter-in.is-flip .chapter-copy { order: -1; }
  .table > div { grid-template-columns: minmax(0, 1fr); gap: 4px; }
  .foot-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .foot-brand { grid-column: 1 / -1; }
}
@media (max-width: 520px) {
  .foot-meta { flex-direction: column; align-items: flex-start; gap: 10px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; }
  .js [data-reveal] { opacity: 1; transform: none; }
}