.tutorial-app { position:fixed; inset:0; z-index:31; display:none; background:#f5f5f3; color:#242424; }
.tutorial-app.is-open { display:block; }
.tutorial-page { display:flex; flex-direction:column; width:100%; height:100%; }
.tutorial-main { flex:1; min-height:0; overflow-y:auto; padding:24px 18px 40px; }
.tutorial-list { display:grid; gap:9px; max-width:640px; margin:0 auto; }
.tutorial-item { position:relative; overflow:visible; border:1px solid rgba(0,0,0,.08); border-radius:16px; background:rgba(255,255,255,.62); scroll-margin-top:10px; }
.tutorial-item-head { position:static; display:grid; grid-template-columns:25px 42px minmax(0,1fr) 25px; align-items:center; gap:10px; width:100%; min-height:68px; padding:10px 12px; border:0; background:transparent; color:inherit; text-align:left; font:inherit; cursor:pointer; }
.tutorial-item.is-open .tutorial-item-head { z-index:3; border-radius:15px; background:rgba(248,248,246,.96); box-shadow:0 5px 14px rgba(0,0,0,.08); -webkit-backdrop-filter:blur(18px); backdrop-filter:blur(18px); }
.tutorial-item.is-pinned { padding-top:68px; }
.tutorial-item.is-pinned .tutorial-item-head { position:fixed; top:var(--tutorial-pin-top); left:var(--tutorial-pin-left); width:var(--tutorial-pin-width); }
.tutorial-item-number { color:#aaa; font:italic 12px Georgia,serif; text-align:center; }
.tutorial-item-icon { display:grid; place-items:center; width:42px; height:42px; overflow:hidden; border-radius:13px; background:#e5e5e2; }
.tutorial-item-icon img { display:block; width:100%; height:100%; object-fit:cover; }
.tutorial-item-copy { display:grid; min-width:0; gap:4px; }
.tutorial-item-copy b { overflow:hidden; font-size:13px; text-overflow:ellipsis; white-space:nowrap; }
.tutorial-item-copy small { overflow:hidden; color:#999; font-size:10px; text-overflow:ellipsis; white-space:nowrap; }
.tutorial-item-head > i { color:#999; font-size:20px; font-style:normal; font-weight:300; text-align:center; }
.tutorial-item-detail { margin:0 12px 12px; padding:12px 13px; border-top:1px solid rgba(0,0,0,.07); color:#888; }
.tutorial-item-detail > span { color:#aaa; font-size:8px; font-weight:700; letter-spacing:.15em; }
.tutorial-item-detail p { margin-top:6px; font-size:11px; line-height:1.5; }
.tutorial-guide { display:grid; gap:12px; margin-top:10px; }
.tutorial-guide-item { display:grid; gap:4px; }
.tutorial-guide-item b { color:#555; font-size:11px; font-weight:600; }
.tutorial-guide-item p { margin:0; color:#888; font-size:11px; line-height:1.55; }
@media (max-width:430px) { .tutorial-main { padding-right:14px; padding-left:14px; }.tutorial-item-head { grid-template-columns:22px 39px minmax(0,1fr) 22px; gap:8px; padding-right:9px; padding-left:9px; }.tutorial-item-icon { width:39px; height:39px; border-radius:12px; } }
@media not all {
  .tutorial-app { background:#202020; color:#eee; }
  .tutorial-item-copy small,.tutorial-item-detail { color:#aaa; }
  .tutorial-item { border-color:rgba(255,255,255,.13); background:rgba(255,255,255,.07); }
  .tutorial-item.is-open .tutorial-item-head { background:rgba(32,32,32,.96); box-shadow:0 5px 14px rgba(0,0,0,.25); }
  .tutorial-item-detail { border-color:rgba(255,255,255,.12); }
  .tutorial-item-icon { background:#444; }
  .tutorial-guide-item b { color:#ddd; }
}