/* tutorial.css — 「使用教學」分頁 */
.tut-page .sub { max-width: 72ch; }
.tut-legend { display: block; margin-top: 6px; font-size: .86em; }
.tut-tabs { margin: 18px 0 22px; }

.tut-columns { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; align-items: start; }
.tut-col { display: grid; gap: 20px; min-width: 0; }

.tut-section { margin: 0; }
.tut-section.tut-accent { border: 1px solid rgba(189, 147, 249, .55); }
.tut-heading { margin: 0 0 4px; font-size: 1.08rem; letter-spacing: .02em; }
.tut-cards { display: grid; gap: 12px; margin-top: 14px; }

.tut-card {
  display: grid; grid-template-columns: 168px minmax(0, 1fr); gap: 14px; align-items: start;
  padding: 12px; border-radius: 12px; background: rgba(0, 0, 0, .16); border: 1px solid rgba(255, 255, 255, .06);
}
.tut-thumb {
  position: relative; display: block; aspect-ratio: 400 / 250; border-radius: 8px; overflow: hidden;
  background: #282a36; border: 1px solid rgba(255, 255, 255, .06);
}
.tut-thumb img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .2s; }
.tut-thumb:hover img { transform: scale(1.04); }
.tut-thumb:focus-visible { outline: 2px solid #8be9fd; outline-offset: 2px; }
.tut-demo {
  position: absolute; top: 6px; right: 6px; padding: 1px 7px; border-radius: 999px;
  background: rgba(0, 0, 0, .6); color: #fff; font-size: .66rem; letter-spacing: .08em;
}
.tut-text { min-width: 0; }
.tut-text h4 { margin: 0; font-size: .98rem; line-height: 1.5; color: #a4fcf3; }
.tut-text p { margin: 6px 0 0; font-size: .88rem; line-height: 1.75; color: #aeb8ce; overflow-wrap: anywhere; }
.tut-text strong { color: #e8edf6; }

/* 畫面上的按鈕 */
.tut-btn {
  display: inline-block; margin: 0 .12em; padding: 0 .45em; border: 1px solid rgba(189, 147, 249, .6); border-radius: 6px;
  background: rgba(189, 147, 249, .14); color: #ece2ff; font-size: .92em; line-height: 1.55; white-space: nowrap;
}
/* 最上方的分頁 */
.tut-tab {
  display: inline-block; margin: 0 .12em; padding: 0 .55em; border: 1px solid rgba(139, 233, 253, .5); border-radius: 999px;
  background: rgba(139, 233, 253, .1); color: #cdf7ff; font-size: .92em; line-height: 1.55; white-space: nowrap;
}
.tut-new {
  margin-left: 8px; padding: 1px 7px; border-radius: 999px; background: #ffb86c; color: #282a36;
  font-size: .68rem; font-weight: 700; vertical-align: 2px;
}

@media (max-width: 1000px) { .tut-columns { grid-template-columns: 1fr; } }
@media (max-width: 560px) {
  .tut-card { grid-template-columns: 1fr; }
  .tut-thumb { max-width: 320px; }
  .tut-btn, .tut-tab { white-space: normal; }
}
@media (prefers-reduced-motion: reduce) { .tut-thumb img { transition: none; } }