/* 全站像素风共用件（2026-10-29 起，原创稿的动画演示统一 2D 像素风）。
   用法：build.py 的 render_body 里任何像素演示块置 need_px = True，页面就会加载一次本文件 + /js/pixel.js。
   规矩：
   - 像素格 --px：4px，手机（≤600px）3px。SVG 用整数坐标 rect / path 拼，外层加 .px-svg（crispEdges）；位图加 .px-img。
   - 颜色只用 style.css 的变量（--ink --ink2 --mut --rule --paper --paper2 --red --red2 --ok），不另起调色板。
     站点目前没有深色主题；只要不写死颜色，将来 :root 换一套深色变量时像素图会跟着走。
   - 动画只动 transform / opacity，逐帧 steps()（Safari 不能过渡 SVG 的 x/width）。
   - prefers-reduced-motion：本文件统一关掉 .px-* 的动画；JS 端用 BJPixel.reduced 只画静态帧。 */
:root{--px:4px}
@media (max-width:600px){:root{--px:3px}}

/* 图像 */
.px-svg,.px-svg *{shape-rendering:crispEdges}
.px-svg text{shape-rendering:auto}
.px-img{image-rendering:crisp-edges;image-rendering:pixelated}

/* 像素描边框：直角 + 四角各缺一格（clip-path 切角，所以焦点框要画在里面） */
.px-box{border:var(--px) solid var(--ink);border-radius:0;
  clip-path:polygon(var(--px) 0,calc(100% - var(--px)) 0,calc(100% - var(--px)) var(--px),100% var(--px),100% calc(100% - var(--px)),calc(100% - var(--px)) calc(100% - var(--px)),calc(100% - var(--px)) 100%,var(--px) 100%,var(--px) calc(100% - var(--px)),0 calc(100% - var(--px)),0 var(--px),var(--px) var(--px))}

/* 像素按钮：方角、硬投影，按下时投影收回（transform，逐帧感） */
.px-btn{font:600 .84rem/1.15 var(--sans);letter-spacing:.02em;min-height:40px;padding:8px 12px;border:2px solid var(--ink);border-radius:0;
  background:var(--paper);color:var(--ink);box-shadow:var(--px) var(--px) 0 var(--ink);cursor:pointer;-webkit-tap-highlight-color:transparent}
.px-btn[aria-pressed=true]{background:var(--ink);color:var(--paper)}
.px-btn:active{transform:translate(var(--px),var(--px));box-shadow:none}
.px-btn:focus-visible{outline:3px solid var(--red);outline-offset:3px}
.px-btn[hidden]{display:none}
.px-btns{display:flex;flex-wrap:wrap;gap:calc(var(--px) * 2 + 2px)}

/* 像素小字标签 */
.px-tag{display:inline-block;padding:1px 6px;font:600 .72rem/1.5 var(--sans);letter-spacing:.03em;color:var(--ink2);background:var(--paper);border:2px solid var(--rule)}

/* 逐帧小动画（steps，全是 transform / opacity） */
@keyframes px-bob{to{transform:translateY(calc(var(--px) * -1))}}
@keyframes px-blink{50%{opacity:0}}
@keyframes px-nudge{to{transform:translateX(var(--px))}}
.px-bob{animation:px-bob .6s steps(1,end) infinite alternate}
.px-blink{animation:px-blink 1s steps(1,end) infinite}
.px-nudge{animation:px-nudge .5s steps(1,end) infinite alternate}

@media (prefers-reduced-motion:reduce){
  .px-bob,.px-blink,.px-nudge,.px-btn{animation:none!important;transition:none!important}
  .px-btn:active{transform:none}
}