/* 灵点AI · 学习进度（本地保存） */
.ln-progress-done {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px;
  margin: 32px 0 0; padding: 18px 22px; border-radius: 18px;
  border: 1px solid color-mix(in srgb, var(--w-blue, #2638fa) 22%, transparent);
  background: color-mix(in srgb, var(--w-blue, #2638fa) 6%, var(--w-bg-elv, #fff));
  font-family: var(--w-font-reading, system-ui);
}
.ln-progress-done p { margin: 0; font-size: 15px; line-height: 1.7; color: var(--w-ink, #0c1024); }
.ln-progress-done b { color: var(--w-blue, #2638fa); }
.ln-progress-btn {
  display: inline-flex; align-items: center; gap: 8px; border: 1px solid transparent; cursor: pointer;
  padding: 11px 18px; border-radius: 999px; font: 700 15px/1 var(--w-font-reading, system-ui);
  background: var(--w-blue, #2638fa); color: #fff !important; text-decoration: none !important; white-space: nowrap;
}
.ln-progress-btn.is-done { background: #00b383; }
.ln-progress-btn.ghost { background: transparent; color: var(--w-blue, #2638fa) !important; border-color: currentColor; }
:root[data-theme="dark"] .ln-progress-btn.ghost { color: #a3abff !important; }
.ln-progress-btn:focus-visible { outline: 2px solid var(--w-blue, #2638fa); outline-offset: 3px; }

.ln-resume {
  display: flex; flex-wrap: wrap; align-items: center; gap: 16px; justify-content: space-between;
  width: min(1180px, calc(100% - 40px)); margin: 0 auto 32px; padding: 18px 22px; border-radius: 20px;
  background: var(--w-bg-elv, #fff); border: 1px solid var(--w-line, #dce0ee);
  box-shadow: 0 14px 34px rgb(16 24 172 / 8%); font-family: var(--w-font-reading, system-ui);
}
.ln-resume-main { display: flex; align-items: center; gap: 14px; min-width: 0; }
.ln-resume-main img { flex: none; }
.ln-resume small { display: block; font: 700 12px/1.3 var(--w-mono, monospace); letter-spacing: .08em; color: var(--w-blue, #2638fa); }
:root[data-theme="dark"] .ln-resume small { color: #a3abff; }
.ln-resume strong { display: block; margin-top: 6px; font-size: 17px; color: var(--w-ink, #0c1024); }
.ln-resume-bar { width: min(220px, 50vw); height: 8px; border-radius: 4px; background: var(--w-line, #dce0ee); overflow: hidden; margin-top: 10px; }
.ln-resume-bar i { display: block; height: 100%; background: linear-gradient(90deg, #2638fa, #00e9aa); }
.ln-resume-actions { display: flex; gap: 10px; flex-wrap: wrap; }

.ln-hero-resume { display: flex; justify-content: center; margin-top: 16px; }
.ln-hero-resume a {
  display: inline-flex; align-items: center; gap: 10px; max-width: 100%; padding: 4px 16px 4px 6px; border-radius: 999px;
  background: var(--w-bg-elv, #fff); border: 1px solid var(--w-line, #dce0ee); text-decoration: none;
  font: 600 14px/1.3 var(--w-font-reading, system-ui); color: var(--w-ink, #0c1024) !important;
  box-shadow: 0 8px 20px rgb(16 24 172 / 8%);
}
.ln-hero-resume a:hover { border-color: var(--w-blue, #2638fa); }
.ln-hero-resume b { color: var(--w-blue, #2638fa); }
:root[data-theme="dark"] .ln-hero-resume b { color: #a3abff; }

.stop-lessons a.ln-lesson-done span::after { content: " ✓"; color: #00b383; font-weight: 800; }

/* 首页标题轮换词：用 logo 三色（绿 #00E9AA / 蓝 #2638FA / 深蓝 #1018AC） */
.studio .hero-title .hero-slot-word.tone-mint { color: #00b383; --slot-mark: rgb(0 233 170 / 30%); }
.studio .hero-title .hero-slot-word.tone-sky  { color: #2638fa; --slot-mark: rgb(38 56 250 / 18%); }
.studio .hero-title .hero-slot-word.tone-blue { color: #1018ac; --slot-mark: rgb(16 24 172 / 16%); }
:root[data-theme="dark"] .studio .hero-title .hero-slot-word.tone-mint { color: #00e9aa; --slot-mark: rgb(0 233 170 / 24%); }
:root[data-theme="dark"] .studio .hero-title .hero-slot-word.tone-sky  { color: #7d89ff; --slot-mark: rgb(38 56 250 / 55%); }
:root[data-theme="dark"] .studio .hero-title .hero-slot-word.tone-blue { color: #c9cdff; --slot-mark: rgb(16 24 172 / 95%); }

/* 点点实践向导（首页） */
.ln-guide { padding-top: clamp(48px, 7vw, 88px); padding-bottom: clamp(32px, 6vw, 88px); font-family: var(--w-font-reading, system-ui); }
.ln-guide-card {
  display: grid; grid-template-columns: 240px 1fr; gap: clamp(20px, 4vw, 48px); align-items: center;
  padding: clamp(22px, 4vw, 44px); border-radius: 28px; border: 1px solid var(--w-line, #dce0ee);
  background:
    radial-gradient(420px 260px at 0% 0%, rgb(0 233 170 / 14%), transparent 70%),
    radial-gradient(480px 300px at 100% 100%, rgb(38 56 250 / 9%), transparent 70%),
    var(--w-bg-elv, #fff);
}
.ln-guide-mascot { text-align: center; }
.ln-guide-mascot img { display: block; margin: 0 auto; width: 190px; max-width: 100%; height: auto; filter: drop-shadow(0 18px 22px rgb(16 24 172 / 16%)); }
.ln-guide-mascot img.ln-pop { animation: ln-pop .5s cubic-bezier(.3, 1.6, .5, 1); }
@keyframes ln-pop { 0% { transform: scale(.8) rotate(-6deg); opacity: .4; } 60% { transform: scale(1.06) rotate(2deg); opacity: 1; } 100% { transform: none; } }
@media (prefers-reduced-motion: reduce) { .ln-guide-mascot img.ln-pop { animation: none; } }
.ln-guide-bubble {
  display: inline-block; position: relative; margin-bottom: 14px; padding: 10px 16px; border-radius: 18px;
  background: var(--w-blue, #2638fa); color: #fff; font-weight: 700; font-size: 14px; line-height: 1.45; max-width: 230px;
}
.ln-guide-bubble::after { content: ""; position: absolute; left: 50%; bottom: -6px; width: 12px; height: 12px; background: inherit; transform: translateX(-50%) rotate(45deg); border-radius: 2px; }
.ln-guide-kicker { margin: 0 0 8px; font: 700 12px/1.2 var(--w-mono, monospace); letter-spacing: .12em; color: var(--w-blue, #2638fa); }
.ln-guide h2 { margin: 0; font-size: clamp(26px, 3.4vw, 38px); line-height: 1.25; color: var(--w-ink, #0c1024); text-wrap: balance; }
.ln-guide-sub { margin: 10px 0 0; color: color-mix(in srgb, var(--w-ink, #0c1024) 62%, transparent); font-size: 16px; line-height: 1.6; }
.ln-guide-choices { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 22px; }
.ln-guide-choices button {
  border: 1px solid var(--w-line, #dce0ee); background: var(--w-bg-elv, #fff); color: var(--w-ink, #0c1024);
  padding: 11px 18px; border-radius: 999px; font: 700 15px/1 var(--w-font-reading, system-ui); cursor: pointer;
}
.ln-guide-choices button:hover { border-color: var(--w-blue, #2638fa); color: var(--w-blue, #2638fa); }
.ln-guide-choices button[aria-pressed="true"] { background: var(--w-blue, #2638fa); border-color: var(--w-blue, #2638fa); color: #fff; }
.ln-guide-choices button:focus-visible, .ln-guide-item:focus-visible, .ln-guide-task:focus-visible { outline: 2px solid var(--w-blue, #2638fa); outline-offset: 3px; }
.ln-guide-result { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-top: 20px; }
.ln-guide-item {
  display: block; padding: 16px 18px; border-radius: 16px; border: 1px solid var(--w-line, #dce0ee);
  background: var(--w-bg-elv, #fff); text-decoration: none !important; color: var(--w-ink, #0c1024) !important; min-width: 0;
  transition: border-color .2s, transform .2s;
}
.ln-guide-item:hover { border-color: var(--w-blue, #2638fa); transform: translateY(-2px); }
.ln-guide-item small, .ln-guide-task small { display: block; font: 700 12px/1 var(--w-mono, monospace); letter-spacing: .1em; color: var(--w-blue, #2638fa); margin-bottom: 8px; }
.ln-guide-item b { display: block; font-size: 16px; line-height: 1.45; }
.ln-guide-item span { display: block; margin-top: 6px; font-size: 14px; color: color-mix(in srgb, var(--w-ink, #0c1024) 60%, transparent); line-height: 1.55; }
.ln-guide-task {
  display: flex; align-items: center; gap: 14px; margin-top: 12px; padding: 16px 18px; border-radius: 16px;
  background: color-mix(in srgb, #00e9aa 14%, var(--w-bg-elv, #fff)); border: 1px solid color-mix(in srgb, #00b383 35%, transparent);
  text-decoration: none !important; color: var(--w-ink, #0c1024) !important;
}
.ln-guide-task small { color: #00936b; margin: 0; flex: none; }
.ln-guide-task b { flex: 1; font-size: 15px; line-height: 1.55; }
.ln-guide-go { flex: none; font-weight: 800; color: #00936b; }
:root[data-theme="dark"] .ln-guide-kicker, :root[data-theme="dark"] .ln-guide-item small { color: #a3abff; }
:root[data-theme="dark"] .ln-guide-task small, :root[data-theme="dark"] .ln-guide-go { color: #00e9aa; }
@media (max-width: 760px) {
  .ln-guide-card { grid-template-columns: 1fr; }
  .ln-guide-mascot { display: flex; align-items: center; gap: 12px; text-align: left; }
  .ln-guide-mascot img { order: -1; width: 84px; margin: 0; }
  .ln-guide-bubble { margin: 0; }
  .ln-guide-bubble::after { left: -5px; bottom: 50%; transform: translateY(50%) rotate(45deg); }
  .ln-guide-result { grid-template-columns: 1fr; }
  .ln-guide-task { flex-wrap: wrap; }
}

/* Skill 使用说明（/skills/） */
.ln-howto-intro { margin: 0 0 18px; padding: 12px 16px; border-radius: 14px; font-size: 14px; line-height: 1.6;
  background: color-mix(in srgb, var(--w-blue, #2638fa) 6%, var(--w-bg-elv, #fff)); border: 1px solid var(--w-line, #dce0ee); color: var(--w-ink, #0c1024); }
.ln-howto { grid-column: 1 / -1; max-width: 680px; margin-top: 12px; border-radius: 14px; border: 1px solid var(--w-line, #dce0ee); background: color-mix(in srgb, #00e9aa 5%, var(--w-bg-elv, #fff)); }
.ln-howto > summary { cursor: pointer; padding: 10px 14px; font-weight: 700; font-size: 14px; color: var(--w-ink, #0c1024); list-style: none; }
.ln-howto > summary::-webkit-details-marker { display: none; }
.ln-howto > summary::before { content: "＋"; display: inline-block; width: 1.4em; color: #00936b; font-weight: 800; }
.ln-howto[open] > summary::before { content: "－"; }
.ln-howto-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin: 0; padding: 0 14px; }
.ln-howto-grid div { min-width: 0; }
.ln-howto-grid dt { font: 700 12px/1.3 var(--w-mono, monospace); letter-spacing: .08em; color: #00936b; }
.ln-howto-grid dd { margin: 4px 0 0; font-size: 14px; line-height: 1.6; color: var(--w-ink, #0c1024); }
.ln-howto-try { margin: 12px 14px 0; padding: 12px 14px; border-radius: 12px; background: var(--w-bg-elv, #fff); border: 1px dashed var(--w-line, #dce0ee); }
.ln-howto-try-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; font-size: 13px; color: var(--w-ink, #0c1024); }
.ln-howto-try p { margin: 6px 0 0; font-size: 14px; line-height: 1.65; color: var(--w-ink, #0c1024); }
.ln-howto-copy { flex: none; cursor: pointer; border: 1px solid var(--w-line, #dce0ee); background: transparent; color: var(--w-blue, #2638fa);
  border-radius: 999px; padding: 5px 12px; font: 700 12px/1 var(--w-font-reading, system-ui); }
.ln-howto-copy.is-done { color: #00936b; border-color: #00b383; }
.ln-howto-tip { margin: 10px 14px 0; font-size: 13px; line-height: 1.6; color: color-mix(in srgb, var(--w-ink, #0c1024) 65%, transparent); }
.ln-howto > :last-child { margin-bottom: 14px; }
:root[data-theme="dark"] .ln-howto-grid dt, :root[data-theme="dark"] .ln-howto > summary::before { color: #00e9aa; }
:root[data-theme="dark"] .ln-howto-copy { color: #a3abff; }
@media (max-width: 760px) { .ln-howto-grid { grid-template-columns: 1fr; } }