docs: explain stylesheet ownership, responsive rules and display boundaries

app/assets/styles/RoxyMascot.CDqPSf2d.css

@@ -1,3 +1,5 @@
+/* 站点吉祥物：CSS分层造型、头部摇摆和眨眼动画。 */
+/* 导入方：app/components/home/RoxyMascot.vue。 */
 .roxy-mascot[data-v-65169a82] {
   --roxy-ink: #45465f;
   --roxy-hair: #779aca;
@@ -131,6 +133,7 @@
   left: 7px;
   box-shadow: 4px 0 #d7af9b;
 }
+/* 头部、五官与发型使用独立图层；底部关键帧仅改变装饰姿态。 */
 .roxy-head[data-v-65169a82] {
   transform-origin: 59% 94%;
   width: 151px;
@@ -436,6 +439,7 @@
   transform: rotate(30deg);
   box-shadow: inset 3px 2px #f0c5d4;
 }
+/* 动画 roxy-head-sway-65169a82 的关键帧；动画名称与引用该名称的选择器需要同步维护。 */
 @keyframes roxy-head-sway-65169a82 {
   0%,
   to {
@@ -446,6 +450,7 @@
     transform: rotate(4deg);
   }
 }
+/* 动画 roxy-blink-65169a82 的关键帧；动画名称与引用该名称的选择器需要同步维护。 */
 @keyframes roxy-blink-65169a82 {
   0%,
   43%,
@@ -457,12 +462,14 @@
     scale: 1 0.08;
   }
 }
+/* 视口条件 (width<=767px) 下的响应式覆盖；保留相对基础规则的层叠顺序。 */
 @media (width<=767px) {
   .roxy-eye[data-v-65169a82],
   .roxy-head[data-v-65169a82] {
     animation: none;
   }
 }
+/* 尊重减少动态效果偏好：保留状态信息，降低或取消非必要动画。 */
 @media (prefers-reduced-motion: reduce) {
   .roxy-eye[data-v-65169a82],
   .roxy-head[data-v-65169a82] {