/* ——— 体验页：与宣传页同一语言——无装饰，只有必要之物 ——— */
/* 质感 SSOT：docs/index.html（hairline / neutral / 零阴影 / 唯一琥珀强调） */

.hairline {
  border-color: rgb(0 0 0 / 0.15);
}
.dark .hairline {
  border-color: rgb(255 255 255 / 0.2);
}

.link-line {
  text-decoration: underline;
  text-underline-offset: 5px;
  text-decoration-thickness: 1px;
}
.link-line:hover {
  color: #b45309;
}
.dark .link-line:hover {
  color: #fbbf24;
}

/* 标记形态 SSOT：src/logic/config.ts highlightDefaultStyle()
   色值由 try.js 内联 box-shadow 设置（inset 0 -5px 0 0 <色>）；
   transition 用于回跳脉冲，0.5s ease-in-out 对齐 src/contentScripts/restorer.ts */
.mark {
  padding-bottom: 5px;
  cursor: pointer;
  transition: box-shadow 0.5s ease-in-out;
}

/* Tooltip 弹入 150ms，对齐扩展 Tooltip.vue */
#tooltip {
  animation: try-pop 150ms cubic-bezier(0.22, 1, 0.36, 1);
}
@keyframes try-pop {
  from {
    opacity: 0;
    transform: translateY(4px) scale(0.98);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@media (prefers-reduced-motion: reduce) {
  #tooltip {
    animation: none;
  }
  .mark {
    transition: none;
  }
}