@layer components {
  /* 12 列 bento；单元 = 3 列。≤1024 六列；<768 单列 */
  .bento { display: grid; grid-template-columns: repeat(12, 1fr); grid-auto-rows: minmax(200px, auto); gap: var(--s-4); }
  .cell {
    position: relative; display: flex; flex-direction: column; gap: var(--s-3); padding: var(--s-5);
    background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-md); box-shadow: var(--hilite);
    overflow: hidden; transition: border-color var(--dur) var(--ease-out), transform var(--dur) var(--ease-out);
  }
  .cell:hover { border-color: color-mix(in oklab, var(--cyan) 40%, var(--line)); transform: translateY(-2px); }
  .cell-2x2 { grid-column: span 6; grid-row: span 2; border-radius: var(--r-lg); }
  .cell-2x1 { grid-column: span 6; }
  .cell-1x2 { grid-column: span 3; grid-row: span 2; }
  .cell-1x1 { grid-column: span 3; }
  .cell-head { display: flex; align-items: center; gap: var(--s-2); }
  .cell-head .icon { color: var(--cyan-ink); width: 20px; height: 20px; }
  .cell h3 { font-size: var(--t-base); font-weight: 600; }
  .cell-2x2 h3 { font-size: var(--t-lg); }
  .cell p { color: var(--muted); font-size: var(--t-sm); line-height: 1.55; text-wrap: pretty; }
  .cell .cell-visual { margin-top: auto; }
  .cell-key { position: absolute; top: var(--s-3); right: var(--s-4); font-family: var(--font-mono); font-size: 10px; letter-spacing: .14em; color: var(--muted); opacity: .7; }

  @media (max-width: 1024px) {
    .bento { grid-template-columns: repeat(6, 1fr); }
    .cell-2x2 { grid-column: span 6; grid-row: span 1; }
    .cell-2x1 { grid-column: span 6; }
    .cell-1x2 { grid-column: span 3; grid-row: span 1; }
    .cell-1x1 { grid-column: span 3; }
  }
  @media (max-width: 767px) {
    .bento { grid-template-columns: 1fr; grid-auto-rows: auto; }
    .cell-2x2, .cell-2x1, .cell-1x2, .cell-1x1 { grid-column: 1; grid-row: auto; }
    .cell-2x2 { max-height: 320px; }
    .cell-2x2 .cell-visual { max-height: 150px; overflow: hidden; }
  }

  /* ---- 微视觉：对话转录 ---- */
  .chat { display: grid; gap: var(--s-2); font-size: var(--t-sm); }
  .chat .msg { max-width: 88%; padding: var(--s-2) var(--s-3); border-radius: var(--r-md); line-height: 1.45; }
  .chat .msg-user { justify-self: end; background: var(--raised); border: 1px solid var(--line-strong); border-bottom-right-radius: var(--r-xs); }
  .chat .msg-ai { justify-self: start; background: color-mix(in oklab, var(--cyan) 10%, var(--surface)); border: 1px solid color-mix(in oklab, var(--cyan) 30%, transparent); border-bottom-left-radius: var(--r-xs); }
  .chat .msg-ai b { color: var(--cyan-ink); font-weight: 600; }
  .chat .call { display: inline-flex; gap: var(--s-2); align-items: center; font-family: var(--font-mono); font-size: 11px; color: var(--muted); padding: 2px var(--s-2); border: 1px dashed var(--line-strong); border-radius: var(--r-xs); justify-self: start; }
  .chat .call i { width: 6px; height: 6px; border-radius: 50%; background: var(--ok); }

  /* ---- 波形：只动 transform ---- */
  .wave { display: flex; align-items: center; gap: 3px; height: 56px; }
  .wave i { width: 4px; height: 100%; border-radius: var(--r-pill); background: var(--cyan); transform: scaleY(.25); transform-origin: center; animation: wave 1.4s ease-in-out infinite; }
  .wave i:nth-child(2n) { background: color-mix(in oklab, var(--cyan) 70%, var(--amber)); }
  .wave i:nth-child(3n) { animation-delay: -.2s; }
  .wave i:nth-child(4n) { animation-delay: -.5s; }
  .wave i:nth-child(5n) { animation-delay: -.9s; }
  .wave i:nth-child(7n) { animation-delay: -1.2s; }
  @keyframes wave { 0%, 100% { transform: scaleY(.2); } 50% { transform: scaleY(1); } }
  .wave-quote { font-family: var(--font-mono); font-size: var(--t-xs); color: var(--muted); margin-top: var(--s-2); }
  .wave-quote b { color: var(--text); font-weight: 500; }
  @media (prefers-reduced-motion: reduce) { .wave i { animation: none; transform: scaleY(.6); } .wave i:nth-child(2n) { transform: scaleY(.9); } .wave i:nth-child(3n) { transform: scaleY(.4); } }

  /* ---- 文档框 ---- */
  .docframe { position: relative; aspect-ratio: 3 / 4; max-height: 220px; margin-inline: auto; width: 100%; background: #F6F8FB; border-radius: var(--r-xs); padding: 12% 10%; display: grid; gap: 6%; align-content: start; border: 1px solid var(--line-strong); }
  .docframe i { display: block; height: 4px; border-radius: 2px; background: #B9C3D1; }
  .docframe i:nth-child(2) { width: 70%; }
  .docframe i:nth-child(4) { width: 85%; }
  .docframe i:nth-child(5) { width: 55%; }
  .docframe .ring { position: absolute; left: 10%; top: 44%; width: 38%; height: 9%; border: 2px solid var(--amber); border-radius: var(--r-xs); box-shadow: 0 0 0 3px rgb(255 180 84 / .25); }
  .docframe .tag { position: absolute; right: 8%; bottom: 8%; font-family: var(--font-mono); font-size: 10px; letter-spacing: .1em; color: #4F6176; }

  /* ---- 接线表行：两端点 ---- */
  .wire-row { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: var(--s-2); font-family: var(--font-mono); font-size: var(--t-xs); padding: var(--s-2) var(--s-3); background: var(--raised); border: 1px solid var(--line-strong); border-radius: var(--r-xs); }
  .wire-row .end { display: inline-flex; align-items: center; gap: 6px; }
  .wire-row .end::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--cyan); box-shadow: 0 0 8px var(--cyan); }
  .wire-row .end-b::after { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--amber); box-shadow: 0 0 8px var(--amber); }
  .wire-row .end-b::before { display: none; }
  .wire-row .line { height: 2px; background: linear-gradient(90deg, var(--cyan), var(--amber)); border-radius: 1px; }
  .wire-row + .wire-row { margin-top: var(--s-1); opacity: .55; }
  .wire-row + .wire-row .line { background: var(--line-strong); }
  .wire-row + .wire-row .end::before, .wire-row + .wire-row .end-b::after { background: var(--muted); box-shadow: none; }

  /* ---- 滑块 ---- */
  .slider { display: grid; gap: var(--s-2); font-family: var(--font-mono); font-size: var(--t-xs); color: var(--muted); }
  .slider .track { position: relative; height: 4px; border-radius: 2px; background: var(--line-strong); }
  .slider .track::before { content: ""; position: absolute; inset: 0 40% 0 0; background: var(--cyan); border-radius: 2px; }
  .slider .thumb { position: absolute; top: 50%; left: 60%; width: 16px; height: 16px; transform: translate(-50%, -50%); border-radius: 50%; background: var(--text); box-shadow: 0 0 0 3px var(--surface), 0 0 0 4px var(--cyan); }
  .slider .row { display: flex; justify-content: space-between; }
  .slider .row b { color: var(--text); font-weight: 500; }
  .swatches { display: flex; gap: var(--s-2); }
  .swatches i { width: 18px; height: 18px; border-radius: 50%; border: 1px solid var(--line-strong); }
  .swatches i:nth-child(1) { background: var(--cyan); box-shadow: 0 0 0 2px var(--surface), 0 0 0 3px var(--cyan); }
  .swatches i:nth-child(2) { background: var(--amber); }
  .swatches i:nth-child(3) { background: var(--ok); }
  .swatches i:nth-child(4) { background: var(--danger); }

  /* ---- 多语言 ---- */
  .lang-toggle { display: inline-grid; grid-template-columns: 1fr 1fr; border: 1px solid var(--line-strong); border-radius: var(--r-pill); overflow: hidden; font-size: var(--t-sm); }
  .lang-toggle span { padding: var(--s-2) var(--s-4); text-align: center; }
  .lang-toggle span:first-child { background: var(--cyan); color: var(--btn-ink); font-weight: 600; }
  .lang-ui { margin-top: var(--s-3); display: grid; gap: 4px; font-size: var(--t-xs); color: var(--muted); font-family: var(--font-mono); }
  .lang-ui span::before { content: "▸ "; color: var(--cyan-ink); }

  /* ---- 扫码 ---- */
  .qr { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; width: 70px; aspect-ratio: 1; padding: 6px; background: #F6F8FB; border-radius: var(--r-xs); }
  .qr i { background: #0B111A; border-radius: 1px; }
  .qr i.o { background: transparent; }
  .scan-row { display: flex; align-items: center; gap: var(--s-4); }
  .scan-ok { display: inline-flex; align-items: center; gap: var(--s-1); color: var(--ok); font-family: var(--font-mono); font-size: var(--t-xs); }
  .scan-ok .icon { width: 16px; height: 16px; }
  html[data-surface="paper"] .scan-ok { color: #1E8E4E; }
}