/* Live ADIS（/live-adis）：全屏画布 + 悬停时的一张说明卡。
   画布自己画底色和图（public/assets/js/live-adis.js）；说明卡、按钮用 site.css 的令牌：浮起的白卡（深色里是浮起的灰卡）、
   不描边的胶囊按钮。页面上没有别的文字。 */
html, body { height: 100%; overflow: hidden; overscroll-behavior: none; }
body { padding-top: 0; background: #0b0a0c; }
html[data-theme="light"] body { background: #ffffff; }

.la { position: fixed; inset: 0; }
#la-canvas {
  position: absolute; inset: 0; display: block; width: 100%; height: 100%;
  opacity: 0; transition: opacity 1.4s var(--ease-out);
  touch-action: none; -webkit-tap-highlight-color: transparent;   /* 触屏拖动是转视角，不交给浏览器 */
}
#la-canvas.is-on { opacity: 1; }
.la-still { position: fixed; inset: 0; width: 100%; height: 100%; object-fit: cover; }

.la-tip {
  position: fixed; left: 0; top: 0; z-index: 3;
  width: max-content; max-width: min(300px, calc(100vw - 24px));
  padding: 12px 14px 13px; border-radius: var(--radius-md);
  background: var(--raised); box-shadow: var(--ring), var(--elev-2);
  pointer-events: none; opacity: 0; transition: opacity 0.16s var(--ease-out);
}
.la-tip.is-on { opacity: 1; }
.la-tip-t { margin: 0 0 3px; font: 600 14px/1.35 var(--font-display); letter-spacing: -0.01em; color: var(--ink-strong); }
.la-tip-d { margin: 0; font-size: 13px; line-height: 1.55; color: var(--mut); }

.la-ctl {
  position: fixed; z-index: 2; display: flex; gap: 8px;
  right: max(16px, env(safe-area-inset-right)); bottom: max(16px, env(safe-area-inset-bottom));
  opacity: 0.38; transition: opacity 0.2s var(--ease-out);
}
.la-ctl:hover, .la-ctl:focus-within { opacity: 1; }
.la-btn {
  display: grid; place-items: center; width: 36px; height: 36px; padding: 0;
  border: 0; border-radius: var(--radius-full); background: var(--fill); color: var(--ink);
  cursor: pointer; transition: background 0.15s var(--ease-out);
}
.la-btn:hover { background: var(--fill-hover); }
.la-btn svg { width: 17px; height: 17px; }
/* 照全站：按钮上画的是点下去会切到的主题 */
html[data-theme="dark"] .la-ic-moon, html[data-theme="light"] .la-ic-sun { display: none; }
.la-ic-exit, .la-is-full .la-ic-enter { display: none; }
.la-is-full .la-ic-exit { display: block; }

.la-sr {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip-path: inset(50%); white-space: nowrap;
}

@media (prefers-reduced-motion: reduce) {
  #la-canvas, .la-tip, .la-ctl { transition: none; }
}