/*
 * 功能卡片的小动画：每张卡片画的就是它说的那件事，纯 CSS 循环播放。
 * 只在卡片进入视口时播放（site.js 给 .tile 加 .is-on），离开就停；减少动态效果时停在最后一帧。
 * 统一 8 秒一个循环（--loop），各元素用 animation-delay 错开。
 */
.art {
  --loop: 8s;
  --c: var(--accent);
  --c-soft: rgba(79, 195, 247, 0.16);
  --line: rgba(255, 255, 255, 0.12);
  --txt: rgba(232, 238, 248, 0.82);
  --dim: rgba(232, 238, 248, 0.42);
  position: relative;
  aspect-ratio: 16 / 10;
  margin: -6px -4px 22px;
  border-radius: 14px;
  overflow: hidden;
  background:
    radial-gradient(120% 90% at 50% 0%, rgba(79, 195, 247, 0.10), transparent 60%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.035), rgba(255, 255, 255, 0.01));
  border: 1px solid var(--line);
  font-size: 12px;
  color: var(--txt);
}
.art * { animation-play-state: paused; }
.tile.is-on .art * { animation-play-state: running; }
.art [class*="a-"], .art .panel, .art .panel .bar, .art .ra, .art .rb, .art .rc, .art .merge, .art .opt, .art .hint { animation-duration: var(--loop); animation-iteration-count: infinite; animation-timing-function: cubic-bezier(.22, .8, .24, 1); animation-fill-mode: both; }

/* ---------- 通用零件 ---------- */
.art .pad { position: absolute; inset: 14% 10%; display: flex; flex-direction: column; justify-content: center; gap: 9px; }
.art .row { display: flex; align-items: center; gap: 9px; height: 26px; padding: 0 11px; border-radius: 8px; background: rgba(255, 255, 255, 0.04); border: 1px solid var(--line); }
.art .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--c); box-shadow: 0 0 10px var(--c); flex: none; }
.art .chk { margin-left: auto; width: 14px; height: 14px; border-radius: 50%; background: var(--c); color: #031018; display: grid; place-items: center; font-size: 10px; font-weight: 700; }
.art .chk::before { content: "✓"; }
.art .bar { height: 7px; border-radius: 4px; background: rgba(255, 255, 255, 0.10); }
.art .bar.fill { background: var(--c); }
.art .lbl { position: absolute; font-size: 11px; color: var(--dim); letter-spacing: .02em; }
.art .bubble { padding: 7px 11px; border-radius: 10px; background: rgba(79, 195, 247, 0.12); border: 1px solid rgba(79, 195, 247, 0.28); max-width: 78%; line-height: 1.45; }
.art .bubble.me { align-self: flex-end; background: rgba(255, 255, 255, 0.07); border-color: var(--line); }

/* 出现：淡入上浮；循环末尾统一淡出，下一圈重来 */
@keyframes pop { 0% { opacity: 0; transform: scale(.4); } 70% { transform: scale(1.15); } 100% { opacity: 1; transform: none; } }

/* 步骤逐条出现、逐个打勾（每一步都看得见 / 做完会核对 / 待办） */
@keyframes step-row { 0%, 4% { opacity: 0; transform: translateY(8px); } 10%, 88% { opacity: 1; transform: none; } 96%, 100% { opacity: 0; } }
@keyframes step-chk { 0%, 10% { opacity: 0; transform: scale(.3); } 14% { opacity: 1; transform: scale(1.2); } 17%, 88% { opacity: 1; transform: none; } 96%, 100% { opacity: 0; } }
.art .a-step { animation-name: step-row; }
.art .a-chk { animation-name: step-chk; }
.art .s2 { animation-delay: .9s; } .art .s3 { animation-delay: 1.8s; } .art .s4 { animation-delay: 2.7s; }

/* 侧边面板滑出（做好的直接打开 / 预览台） */
@keyframes panel { 0%, 18% { transform: translateX(105%); } 30%, 86% { transform: none; } 96%, 100% { transform: translateX(105%); } }
@keyframes cell { 0%, 30% { opacity: 0; } 36%, 86% { opacity: 1; } 96%, 100% { opacity: 0; } }
.art .panel { position: absolute; top: 12%; right: 6%; bottom: 12%; width: 50%; border-radius: 10px; background: #0b111b; border: 1px solid rgba(79, 195, 247, .35); box-shadow: -14px 0 40px rgba(0, 0, 0, .45); padding: 12px; display: flex; flex-direction: column; gap: 7px; animation-name: panel; }
.art .panel .bar { animation-name: cell; }

/* 撤销：一行变红划掉，回旋箭头一转，恢复原样 */
@keyframes bad-line { 0%, 22% { background: rgba(255, 255, 255, .10); width: 70%; } 30%, 52% { background: rgba(255, 99, 99, .65); width: 82%; } 62%, 100% { background: rgba(255, 255, 255, .10); width: 70%; } }
@keyframes undo-spin { 0%, 48% { opacity: 0; transform: rotate(0); } 52% { opacity: 1; } 62% { opacity: 1; transform: rotate(-360deg); } 70%, 100% { opacity: 0; transform: rotate(-360deg); } }
.art .a-bad { animation-name: bad-line; }
.art .undo { position: absolute; right: 14%; top: 50%; width: 34px; height: 34px; margin-top: -17px; border: 2px solid var(--c); border-left-color: transparent; border-radius: 50%; animation-name: undo-spin; }
.art .undo::after { content: ""; position: absolute; left: -5px; top: 2px; border: 5px solid transparent; border-top-color: var(--c); transform: rotate(-30deg); }

/* 声波：竖条随机起伏；duck = 先压低再停；cough = 一根尖峰过去、主波不变 */
.art .wave { position: absolute; left: 10%; right: 10%; height: 38%; display: flex; align-items: center; gap: 4px; }
.art .wave i { flex: 1; height: 100%; border-radius: 3px; background: var(--c); transform-origin: center; animation: wave-bar 1.1s ease-in-out infinite alternate; }
.art .wave.me i { background: rgba(255, 255, 255, .85); }
@keyframes wave-bar { 0% { transform: scaleY(.12); } 100% { transform: scaleY(.9); } }
.art .wave i:nth-child(3n) { animation-duration: .8s; } .art .wave i:nth-child(4n+1) { animation-duration: 1.4s; } .art .wave i:nth-child(5n+2) { animation-duration: .65s; }
.art .wave i:nth-child(2n) { animation-delay: -.3s; } .art .wave i:nth-child(3n+1) { animation-delay: -.7s; }
@keyframes duck { 0%, 30% { opacity: 1; transform: scaleY(1); } 38%, 52% { opacity: .55; transform: scaleY(.38); } 60%, 88% { opacity: 0; transform: scaleY(.1); } 96%, 100% { opacity: 1; transform: scaleY(1); } }
@keyframes me-talk { 0%, 30% { opacity: 0; transform: scaleY(.1); } 36%, 86% { opacity: 1; transform: none; } 94%, 100% { opacity: 0; transform: scaleY(.1); } }
.art .a-duck { animation-name: duck; }
.art .a-me { animation-name: me-talk; }
@keyframes me-label { 0%, 30% { opacity: 0; } 36%, 86% { opacity: 1; } 94%, 100% { opacity: 0; } }
.art .a-melbl { animation-name: me-label; }
@keyframes spike { 0%, 34% { opacity: 0; transform: scaleY(0); } 40% { opacity: 1; transform: scaleY(1); } 50%, 100% { opacity: 0; transform: scaleY(0); } }
.art .spike { position: absolute; left: 50%; top: 22%; bottom: 22%; width: 6px; margin-left: -3px; border-radius: 3px; background: #fff; box-shadow: 0 0 14px #fff; animation-name: spike; }
@keyframes tag-fade { 0%, 36% { opacity: 0; } 42%, 56% { opacity: 1; } 64%, 100% { opacity: 0; } }
.art .a-tag { animation-name: tag-fade; }
.art .tone .wave i { background: currentColor; }
.art .tone { color: #4fc3f7; animation: tone-color var(--loop) infinite steps(1); }
@keyframes tone-color { 0%, 32% { color: #4fc3f7; } 33%, 65% { color: #ffb86b; } 66%, 100% { color: #b39cff; } }
@keyframes tone-1 { 0%, 31% { opacity: 1; } 33%, 100% { opacity: 0; } }
@keyframes tone-2 { 0%, 32% { opacity: 0; } 34%, 64% { opacity: 1; } 66%, 100% { opacity: 0; } }
@keyframes tone-3 { 0%, 65% { opacity: 0; } 67%, 98% { opacity: 1; } 100% { opacity: 0; } }
.art .t1 { animation-name: tone-1; } .art .t2 { animation-name: tone-2; } .art .t3 { animation-name: tone-3; }

/* 窗口与控件：高亮框在按钮 / 输入框 / 列表之间跳 */
.art .win { position: absolute; inset: 13% 12%; border-radius: 10px; border: 1px solid var(--line); background: rgba(255, 255, 255, .03); }
.art .win::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 20px; border-bottom: 1px solid var(--line); background: rgba(255, 255, 255, .03); border-radius: 10px 10px 0 0; }
.art .ctl { position: absolute; border-radius: 5px; border: 1px solid var(--line); background: rgba(255, 255, 255, .05); }
@keyframes hunt { 0%, 8% { left: 10%; top: 30%; width: 50%; height: 14%; opacity: 0; }
  12%, 30% { left: 10%; top: 30%; width: 50%; height: 14%; opacity: 1; }
  38%, 56% { left: 10%; top: 52%; width: 34%; height: 34%; opacity: 1; }
  64%, 84% { left: 66%; top: 74%; width: 24%; height: 12%; opacity: 1; }
  92%, 100% { left: 66%; top: 74%; width: 24%; height: 12%; opacity: 0; } }
.art .seek { position: absolute; border-radius: 6px; border: 2px solid var(--c); box-shadow: 0 0 0 4px var(--c-soft), 0 0 18px var(--c); animation-name: hunt; }

/* 光标与菜单 */
@keyframes cursor-move { 0%, 10% { transform: translate(-30px, 30px); opacity: 0; } 18% { opacity: 1; } 34%, 82% { transform: translate(0, 0); opacity: 1; } 92%, 100% { opacity: 0; } }
@keyframes menu-open { 0%, 36% { opacity: 0; transform: scaleY(.6); } 42%, 82% { opacity: 1; transform: none; } 90%, 100% { opacity: 0; } }
@keyframes menu-pick { 0%, 50% { background: transparent; } 54%, 82% { background: var(--c-soft); color: #fff; } 90%, 100% { background: transparent; } }
.art .cursor { position: absolute; width: 0; height: 0; border-left: 7px solid transparent; border-right: 7px solid transparent; border-bottom: 16px solid #fff; transform-origin: top; filter: drop-shadow(0 2px 6px rgba(0, 0, 0, .6)); animation-name: cursor-move; }
.art .menu { position: absolute; width: 38%; padding: 5px; border-radius: 8px; background: #0e1520; border: 1px solid var(--line); box-shadow: 0 12px 30px rgba(0, 0, 0, .5); transform-origin: top left; animation-name: menu-open; }
.art .menu span { display: block; padding: 4px 8px; border-radius: 5px; color: var(--dim); }
.art .menu .a-pick { animation-name: menu-pick; }

/* 代码差异：红行退出、绿行进入 */
.art .code { position: absolute; inset: 12% 9%; display: flex; flex-direction: column; gap: 7px; font-family: ui-monospace, Consolas, monospace; font-size: 11px; }
.art .code .bar { height: 8px; }
@keyframes del-line { 0%, 24% { opacity: 1; background: rgba(255, 255, 255, .10); } 30%, 46% { opacity: 1; background: rgba(255, 99, 99, .7); } 54%, 88% { opacity: .25; background: rgba(255, 99, 99, .5); } 96%, 100% { opacity: 1; background: rgba(255, 255, 255, .10); } }
@keyframes add-line { 0%, 46% { opacity: 0; transform: scaleX(0); } 56%, 88% { opacity: 1; transform: none; } 96%, 100% { opacity: 0; } }
.art .a-del { animation-name: del-line; }
.art .a-add { animation-name: add-line; transform-origin: left; background: rgba(80, 220, 140, .75) !important; }

/* 终端：打字 + 结果 */
@keyframes type { 0%, 8% { width: 0; } 30%, 90% { width: 100%; } 96%, 100% { width: 0; } }
@keyframes result { 0%, 34% { opacity: 0; } 40%, 90% { opacity: 1; } 96%, 100% { opacity: 0; } }
.art .term { position: absolute; inset: 18% 12%; border-radius: 10px; background: #070b12; border: 1px solid var(--line); padding: 14px 16px; font-family: ui-monospace, Consolas, monospace; font-size: 12px; }
.art .term .cmd { display: block; overflow: hidden; white-space: nowrap; color: var(--txt); animation-name: type; animation-timing-function: steps(18) !important; }
.art .term .ok { display: block; margin-top: 10px; color: #6be3a0; animation-name: result; }

/* 记忆：查询词出来，几张记忆卡片依次扇入 */
@keyframes card-in { 0%, 14% { opacity: 0; transform: translateY(18px) rotate(var(--r, 0deg)) scale(.92); } 24%, 86% { opacity: 1; transform: rotate(var(--r, 0deg)); } 96%, 100% { opacity: 0; } }
.art .mcard { position: absolute; width: 46%; padding: 9px 11px; border-radius: 9px; background: #0d1420; border: 1px solid var(--line); box-shadow: 0 10px 26px rgba(0, 0, 0, .45); line-height: 1.5; animation-name: card-in; }
.art .mcard b { color: var(--c); font-weight: 600; }

/* 时间线：游标走到某一天，那天的卡片弹出 */
@keyframes scrub { 0%, 10% { left: 8%; } 50%, 86% { left: 62%; } 96%, 100% { left: 8%; } }
.art .tl { position: absolute; left: 8%; right: 8%; top: 64%; height: 2px; background: var(--line); }
.art .tl i { position: absolute; top: -4px; width: 10px; height: 10px; border-radius: 50%; background: rgba(255, 255, 255, .25); }
.art .scrub { position: absolute; top: calc(64% - 14px); width: 2px; height: 30px; margin-left: -1px; background: var(--c); box-shadow: 0 0 12px var(--c); animation-name: scrub; }

/* 关系图：节点亮起，连线一条条画出来 */
.art svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.art .edge { fill: none; stroke: var(--c); stroke-width: 1.6; stroke-dasharray: 160; stroke-dashoffset: 160; animation-name: draw; }
@keyframes draw { 0%, 20% { stroke-dashoffset: 160; opacity: 1; } 40%, 86% { stroke-dashoffset: 0; opacity: 1; } 96%, 100% { stroke-dashoffset: 0; opacity: 0; } }
.art .node { fill: #0d1420; stroke: rgba(255, 255, 255, .35); stroke-width: 1.2; }
.art .node.hot { stroke: var(--c); animation-name: node-glow; }
@keyframes node-glow { 0%, 12% { fill: #0d1420; } 20%, 86% { fill: rgba(79, 195, 247, .3); } 96%, 100% { fill: #0d1420; } }
.art .ntext { fill: var(--txt); font-size: 9px; text-anchor: middle; }
.art .path { fill: none; stroke: #ffd36b; stroke-width: 2.2; stroke-dasharray: 220; stroke-dashoffset: 220; animation-name: trace; }
@keyframes trace { 0%, 30% { stroke-dashoffset: 220; opacity: 1; } 62%, 86% { stroke-dashoffset: 0; opacity: 1; } 96%, 100% { opacity: 0; } }

/* 闹钟：指针转到八点，响铃，通知滑入 */
@keyframes hand { 0%, 10% { transform: rotate(-90deg); } 40%, 100% { transform: rotate(240deg); } }
@keyframes ring { 0%, 40% { transform: rotate(0); } 43% { transform: rotate(14deg); } 46% { transform: rotate(-14deg); } 49% { transform: rotate(10deg); } 52%, 100% { transform: rotate(0); } }
@keyframes note-in { 0%, 50% { opacity: 0; transform: translateX(30px); } 58%, 88% { opacity: 1; transform: none; } 96%, 100% { opacity: 0; } }
.art .clock { position: absolute; left: 14%; top: 50%; width: 30%; aspect-ratio: 1; transform: translateY(-50%); border-radius: 50%; border: 2px solid rgba(255, 255, 255, .3); }
.art .clock .h { position: absolute; left: 50%; top: 50%; width: 36%; height: 2px; margin-top: -1px; background: var(--c); transform-origin: 0 50%; animation-name: hand; box-shadow: 0 0 8px var(--c); }
.art .clock-wrap { position: absolute; inset: 0; animation-name: ring; transform-origin: 29% 50%; }
.art .note { position: absolute; right: 8%; top: 36%; width: 46%; animation-name: note-in; }

/* 并行：三条进度不同速填满，然后汇总成表 */
@keyframes run-a { 0%, 8% { width: 0; } 40%, 86% { width: 100%; } 96%, 100% { width: 0; } }
@keyframes run-b { 0%, 8% { width: 0; } 30%, 86% { width: 100%; } 96%, 100% { width: 0; } }
@keyframes run-c { 0%, 8% { width: 0; } 50%, 86% { width: 100%; } 96%, 100% { width: 0; } }
@keyframes merge { 0%, 52% { opacity: 0; transform: scale(.8); } 60%, 86% { opacity: 1; transform: none; } 96%, 100% { opacity: 0; } }
.art .lane { display: grid; grid-template-columns: 54px 1fr; align-items: center; gap: 10px; }
.art .lane .bar { position: relative; overflow: hidden; }
.art .lane .bar i { position: absolute; inset: 0 auto 0 0; border-radius: 4px; background: var(--c); }
.art .ra { animation-name: run-a; } .art .rb { animation-name: run-b; } .art .rc { animation-name: run-c; }
.art .merge { animation-name: merge; }

/* 拼图块卡进去（技能） */
@keyframes snap { 0%, 14% { transform: translate(60px, -40px) rotate(18deg); opacity: 0; } 30% { opacity: 1; } 44%, 86% { transform: none; opacity: 1; } 96%, 100% { opacity: 0; } }
.art .slot { position: absolute; width: 22%; aspect-ratio: 1; border-radius: 10px; border: 1px dashed rgba(255, 255, 255, .25); }
.art .piece { position: absolute; width: 22%; aspect-ratio: 1; border-radius: 10px; background: linear-gradient(135deg, var(--c), #2a7fb0); box-shadow: 0 0 24px rgba(79, 195, 247, .5); animation-name: snap; display: grid; place-items: center; color: #031018; font-weight: 700; }

/* 放大镜扫过 */
@keyframes sweep { 0%, 8% { left: 10%; } 45% { left: 62%; } 55%, 86% { left: 62%; } 96%, 100% { left: 10%; } }
@keyframes found { 0%, 44% { border-color: var(--line); box-shadow: none; } 50%, 86% { border-color: var(--c); box-shadow: 0 0 18px var(--c-soft); } 96%, 100% { border-color: var(--line); } }
.art .lens { position: absolute; top: 26%; width: 22%; aspect-ratio: 1; border-radius: 50%; border: 3px solid var(--c); box-shadow: 0 0 20px var(--c-soft), inset 0 0 20px var(--c-soft); animation-name: sweep; }
.art .lens::after { content: ""; position: absolute; right: -16%; bottom: -16%; width: 34%; height: 4px; background: var(--c); transform: rotate(45deg); border-radius: 2px; }
.art .file { position: absolute; top: 34%; width: 13%; aspect-ratio: .8; border-radius: 5px; border: 1px solid var(--line); background: rgba(255, 255, 255, .04); }
.art .file.hit { animation-name: found; }

/* 模型清单：选中高亮往下移 */
@keyframes pick-move { 0%, 20% { transform: translateY(0); } 34%, 86% { transform: translateY(66px); } 96%, 100% { transform: translateY(0); } }
.art .mlist { position: absolute; left: 22%; right: 22%; top: 16%; display: flex; flex-direction: column; gap: 6px; }
.art .mlist span { position: relative; z-index: 1; height: 27px; display: flex; align-items: center; padding: 0 12px; border-radius: 7px; color: var(--txt); }
.art .mlist .hl { position: absolute; z-index: 0; left: 0; right: 0; top: 0; height: 27px; border-radius: 7px; background: var(--c-soft); border: 1px solid rgba(79, 195, 247, .45); animation-name: pick-move; }

/* 输入框 + 下方提示（Key 去哪拿） */
@keyframes caret { 0%, 50% { opacity: 1; } 51%, 100% { opacity: 0; } }
@keyframes hint-pulse { 0%, 24% { opacity: 0; transform: translateY(6px); } 32%, 86% { opacity: 1; transform: none; } 96%, 100% { opacity: 0; } }
.art .field { height: 30px; border-radius: 8px; border: 1px solid rgba(79, 195, 247, .45); background: rgba(0, 0, 0, .35); display: flex; align-items: center; padding: 0 12px; color: var(--dim); }
.art .field::after { content: ""; width: 1px; height: 14px; margin-left: 2px; background: var(--c); animation: caret 1s steps(1) infinite; }
.art .hint { animation-name: hint-pulse; color: var(--dim); }
.art .hint b { color: var(--c); font-weight: 600; }

/* 盾：外面的箭头撞上就弹开 */
@keyframes bounce-in { 0%, 10% { transform: translateX(-60px); opacity: 0; } 20% { opacity: 1; } 34% { transform: translateX(0); opacity: 1; } 46%, 100% { transform: translateX(-46px) rotate(-30deg); opacity: 0; } }
.art .shield { position: absolute; left: 50%; top: 50%; width: 22%; aspect-ratio: .85; transform: translate(-30%, -50%); border-radius: 46% 46% 50% 50% / 30% 30% 70% 70%; border: 2px solid var(--c); background: var(--c-soft); box-shadow: 0 0 30px var(--c-soft); }
.art .arrow { position: absolute; left: 18%; width: 24%; height: 2px; background: rgba(255, 255, 255, .7); animation-name: bounce-in; }
.art .arrow::after { content: ""; position: absolute; right: -2px; top: -4px; border: 5px solid transparent; border-left-color: rgba(255, 255, 255, .7); }

/* 二选一 */
@keyframes opt-a { 0%, 46% { background: var(--c-soft); border-color: rgba(79, 195, 247, .5); color: #fff; } 50%, 96% { background: transparent; border-color: var(--line); color: var(--dim); } 100% { background: var(--c-soft); } }
@keyframes opt-b { 0%, 46% { background: transparent; border-color: var(--line); color: var(--dim); } 50%, 96% { background: rgba(255, 99, 99, .14); border-color: rgba(255, 99, 99, .5); color: #fff; } 100% { background: transparent; } }
.art .opt { height: 32px; border-radius: 8px; border: 1px solid var(--line); display: flex; align-items: center; justify-content: center; }
.art .o1 { animation-name: opt-a; } .art .o2 { animation-name: opt-b; }

/* 电脑 + 锁：数据点只在屏幕里转 */
@keyframes orbit { 0% { transform: rotate(0) translateX(34px) rotate(0); } 100% { transform: rotate(360deg) translateX(34px) rotate(-360deg); } }
.art .screen { position: absolute; left: 50%; top: 46%; width: 34%; aspect-ratio: 1.5; transform: translate(-50%, -50%); border-radius: 8px; border: 2px solid rgba(255, 255, 255, .35); }
.art .screen::after { content: ""; position: absolute; left: 30%; right: 30%; bottom: -16px; height: 10px; border-radius: 0 0 6px 6px; border: 2px solid rgba(255, 255, 255, .25); border-top: 0; }
.art .orb { position: absolute; left: 50%; top: 50%; width: 7px; height: 7px; margin: -3.5px; border-radius: 50%; background: var(--c); box-shadow: 0 0 10px var(--c); animation: orbit 3.2s linear infinite; }
.art .orb.o2 { animation-duration: 4.4s; animation-direction: reverse; }
.art .lock { position: absolute; left: 50%; top: 46%; width: 16px; height: 13px; margin: -4px 0 0 -8px; border-radius: 3px; background: var(--c); }
.art .lock::before { content: ""; position: absolute; left: 3px; top: -8px; width: 10px; height: 10px; border: 2px solid var(--c); border-bottom: 0; border-radius: 6px 6px 0 0; box-sizing: border-box; }

/* 手机：消息气泡到达 */
.art .phone { position: absolute; left: 50%; top: 50%; width: 34%; height: 88%; transform: translate(-50%, -50%); border-radius: 18px; border: 2px solid rgba(255, 255, 255, .3); padding: 22px 9px 12px; display: flex; flex-direction: column; justify-content: center; gap: 8px; }
.art .phone .bubble { font-size: 9px; padding: 5px 7px; max-width: 92%; }

/* 减少动态效果：不动，停在完整画面 */
@media (prefers-reduced-motion: reduce) {
  .art *, .art *::before, .art *::after { animation: none !important; opacity: 1 !important; }
  .art .panel { transform: none !important; }
}

/* ---------- 2026-10-02 技能 / 长期任务 / 个性 / 帮手 / 只认你 ---------- */
/* 链接：地址栏逐字出现 */
.art .url { height: 28px; border-radius: 8px; border: 1px solid rgba(79, 195, 247, .4); background: rgba(79, 195, 247, .06); padding: 0 10px; display: flex; align-items: center; overflow: hidden; white-space: nowrap; font-family: ui-monospace, Consolas, monospace; font-size: 11px; color: var(--txt); }
.art .url span { display: inline-block; overflow: hidden; max-width: 100%; animation: type-url var(--loop) cubic-bezier(.22, .8, .24, 1) infinite both; }
@keyframes type-url { 0%, 4% { max-width: 0; } 22%, 88% { max-width: 100%; } 96%, 100% { max-width: 0; } }
.art .a-type { animation-name: step-row; }
/* 做法 → 技能卡：聊天气泡之后，一张技能卡成形 */
.art .skillcard { align-self: flex-start; position: relative; padding: 10px 12px; border-radius: 10px; background: linear-gradient(160deg, rgba(79, 195, 247, .18), rgba(79, 195, 247, .05)); border: 1px solid rgba(79, 195, 247, .45); box-shadow: 0 0 24px rgba(79, 195, 247, .18); min-width: 62%; }
.art .skillcard b { display: block; font-size: 10px; letter-spacing: .12em; color: var(--c); margin-bottom: 3px; }
.art .skillcard i { display: block; height: 5px; border-radius: 3px; background: rgba(255, 255, 255, .14); margin-top: 6px; width: 86%; }
.art .skillcard i + i { width: 70%; } .art .skillcard i + i + i { width: 54%; }
@keyframes forge { 0%, 22% { opacity: 0; transform: translateY(10px) scale(.92); filter: blur(4px); } 32%, 88% { opacity: 1; transform: none; filter: none; } 96%, 100% { opacity: 0; } }
.art .a-forge { animation-name: forge; }
/* MCP：中间是 Aivy，三条线接出去，接上一个亮一个 */
.art .hub { position: absolute; left: 50%; top: 50%; width: 64px; height: 64px; margin: -32px 0 0 -32px; border-radius: 50%; display: grid; place-items: center; font-weight: 700; color: #031018; background: var(--c); box-shadow: 0 0 30px rgba(79, 195, 247, .55); z-index: 1; }
.art .wire { position: absolute; left: 50%; top: 50%; height: 2px; width: 30%; transform-origin: 0 50%; background: linear-gradient(90deg, var(--c), rgba(79, 195, 247, .2)); }
.art .wire.w1 { --a: -150deg; } .art .wire.w2 { --a: -30deg; } .art .wire.w3 { --a: 90deg; width: 24%; }
@keyframes wire { 0%, 8% { transform: rotate(var(--a)) scaleX(0); } 18%, 88% { transform: rotate(var(--a)) scaleX(1); } 96%, 100% { transform: rotate(var(--a)) scaleX(0); } }
.art .a-wire { animation-name: wire; }
.art .tool { position: absolute; padding: 5px 10px; border-radius: 8px; border: 1px solid rgba(79, 195, 247, .5); background: rgba(255, 255, 255, .06); font-size: 11px; }
.art .tool.t1 { left: 6%; top: 14%; } .art .tool.t2 { right: 6%; top: 14%; } .art .tool.t3 { left: 50%; bottom: 7%; margin-left: -26px; }
@keyframes plug { 0%, 14% { opacity: 0; transform: scale(.6); } 22% { opacity: 1; transform: scale(1.12); } 28%, 88% { opacity: 1; transform: none; } 96%, 100% { opacity: 0; } }
.art .a-plug { animation-name: plug; }
/* 插件市场：一格格插件，挑中一个打勾 */
.art .shelf { position: absolute; inset: 16% 10%; display: grid; grid-template-columns: repeat(3, 1fr); gap: 9px; }
.art .shelf span { display: grid; place-items: center; border-radius: 9px; border: 1px solid var(--line); background: rgba(255, 255, 255, .04); color: var(--dim); font-size: 11.5px; }
@keyframes pick2 { 0%, 26% { background: rgba(255, 255, 255, .04); color: var(--dim); border-color: var(--line); box-shadow: none; } 34%, 88% { background: rgba(79, 195, 247, .16); color: var(--txt); border-color: rgba(79, 195, 247, .7); box-shadow: 0 0 22px rgba(79, 195, 247, .3); } 96%, 100% { background: rgba(255, 255, 255, .04); color: var(--dim); border-color: var(--line); box-shadow: none; } }
.art .shelf .a-pick2 { animation-name: pick2; position: relative; }
/* 长期任务：进度条 */
.art .prog { margin-left: auto; width: 26%; height: 5px; border-radius: 3px; background: rgba(255, 255, 255, .1); overflow: hidden; flex: none; }
.art .prog i { display: block; height: 100%; background: var(--c); border-radius: 3px; }
/* 个性：一条「温柔 ↔ 干脆」的滑杆 */
.art .soul { position: relative; padding: 14px 14px 30px; border-radius: 12px; border: 1px solid rgba(255, 128, 170, .4); background: rgba(255, 128, 170, .06); }
.art .soul b { display: block; font-size: 10px; letter-spacing: .14em; color: #ff80aa; margin-bottom: 6px; }
.art .soul span { font-size: 12px; }
.art .slider { position: relative; height: 4px; margin-top: 14px; border-radius: 2px; background: linear-gradient(90deg, #ff80aa, var(--c)); }
.art .slider i { position: absolute; top: 50%; left: 22%; width: 14px; height: 14px; margin: -7px 0 0 -7px; border-radius: 50%; background: #fff; box-shadow: 0 0 12px rgba(255, 255, 255, .6); }
@keyframes knob { 0%, 10% { left: 22%; } 40%, 60% { left: 76%; } 90%, 100% { left: 22%; } }
.art .a-knob { animation-name: knob; }
.art .soul em { position: absolute; bottom: 8px; font-style: normal; font-size: 10.5px; color: var(--dim); }
.art .soul em:first-of-type { left: 14px; } .art .soul em:last-of-type { right: 14px; }
/* 帮手：主力模型 + 省钱模型 */
.art .model { padding: 10px 12px; border-radius: 10px; border: 1px solid var(--line); background: rgba(255, 255, 255, .04); display: flex; justify-content: space-between; align-items: baseline; gap: 10px; }
.art .model b { font-size: 12.5px; } .art .model span { font-size: 11px; color: var(--dim); }
.art .model.main { border-color: rgba(150, 120, 255, .55); background: rgba(150, 120, 255, .10); }
.art .model.cheap { border-color: rgba(90, 220, 150, .5); background: rgba(90, 220, 150, .08); }
/* 只认你：访客那行是灰的 */
.art .dot.dim { background: rgba(255, 255, 255, .3); box-shadow: none; }
.art .no { margin-left: auto; color: rgba(255, 120, 120, .9); font-weight: 700; }