[lang="en"] { display: none; }
body.lang-en [lang="zh"] { display: none; }
body.lang-en [lang="en"] { display: revert; }
.lang-link.lang-active { color: var(--accent); font-weight: 700; }
@media(prefers-reduced-motion:reduce){ *[lang] { transition:none !important; } }

:root{
  --ink:#E8EAED; --ink-soft:#B9BFC9;
  --line:rgba(255,255,255,.08); --accent:#00D4FF; --accent-ink:#7CD9FF; --accent-bg:rgba(0,212,255,.12);
  --ok:#16A34A;
  --glass-border:rgba(255,255,255,.08);
  --page-bg:radial-gradient(ellipse 100% 70% at 50% -10%, rgba(0,212,255,.10) 0%, rgba(124,58,237,.10) 30%, rgba(236,72,153,.06) 60%, transparent 80%), linear-gradient(180deg, #0F1428 0%, #0A0E1A 40%, #060912 100%);
  --card-bg:rgba(20,22,26,.7);
  --card-bg-soft:rgba(20,22,26,.5);
  --card-bg-strong:rgba(20,22,26,.6);
  --hover-overlay:rgba(255,255,255,.04);
  --hover-overlay-strong:rgba(255,255,255,.08);
  --hover-overlay-soft:rgba(255,255,255,.06);
  --code-bg:#0A0E1A;
  --code-color:#E8EAED;
  --on-accent:#0A0E1A;
  --on-gradient:#fff;
  --drawer-bg:rgba(15,18,26,.96);
  --drawer-shadow:-24px 0 64px rgba(0,0,0,.5);
  --font-display:-apple-system, BlinkMacSystemFont, "PingFang SC", "Microsoft YaHei", "Segoe UI", Roboto, sans-serif;
  --font-body:-apple-system, BlinkMacSystemFont, "PingFang SC", "Microsoft YaHei", "Segoe UI", Roboto, sans-serif;
  --font-mono:ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;
  --radius:14px;
}

/* 2026-07-25: 浅色模式 (Phase 5 — 深度内容适配)
   深色保留不动, 只针对浅色把所有"白字 + 深底"反转成"深字 + 浅底" */
:root[data-theme="light"] {
  --ink:#0F172A; --ink-soft:#475569;
  --line:rgba(15,23,42,.08); --accent:#0891B2; --accent-ink:#0E7490; --accent-bg:rgba(8,145,178,.10);
  --ok:#16A34A;
  --glass-border:rgba(15,23,42,.10);
  --page-bg:radial-gradient(ellipse 100% 70% at 50% -10%, rgba(8,145,178,.06) 0%, rgba(124,58,237,.06) 30%, rgba(236,72,153,.04) 60%, transparent 80%), linear-gradient(180deg, #FFFFFF 0%, #F8FAFC 40%, #F1F5F9 100%);
  --card-bg:rgba(255,255,255,.8);
  --card-bg-soft:rgba(255,255,255,.7);
  --card-bg-strong:rgba(255,255,255,.85);
  --hover-overlay:rgba(15,23,42,.04);
  --hover-overlay-strong:rgba(15,23,42,.08);
  --hover-overlay-soft:rgba(15,23,42,.06);
  --code-bg:#F1F5F9;
  --code-color:#0F172A;
  --on-accent:#FFFFFF;
  --on-gradient:#fff;
  --drawer-bg:rgba(255,255,255,.97);
  --drawer-shadow:-24px 0 64px rgba(15,23,42,.12);
}


html body.page-skills{
  margin:0;
  background:var(--page-bg) fixed;
  color:var(--ink); font-family:var(--font-body); -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
a{ color:inherit; text-decoration:none; }


.starfield{ position:fixed; inset:0; pointer-events:none; z-index:0; overflow:hidden; }
.stars-back, .stars-mid, .stars-front{ position:absolute; inset:-10%; background-repeat:repeat; }
.stars-back{ background-image:
  radial-gradient(1px 1px at 13% 27%, rgba(255,255,255,0.4), transparent),
  radial-gradient(1px 1px at 37% 63%, rgba(255,255,255,0.5), transparent),
  radial-gradient(1px 1px at 51% 19%, rgba(255,255,255,0.4), transparent),
  radial-gradient(1px 1px at 67% 71%, rgba(255,255,255,0.4), transparent),
  radial-gradient(1px 1px at 77% 47%, rgba(255,255,255,0.5), transparent),
  radial-gradient(1px 1px at 89% 83%, rgba(255,255,255,0.4), transparent),
  radial-gradient(1px 1px at 7% 89%, rgba(255,255,255,0.4), transparent),
  radial-gradient(1px 1px at 29% 73%, rgba(255,255,255,0.5), transparent),
  radial-gradient(1px 1px at 43% 91%, rgba(255,255,255,0.4), transparent),
  radial-gradient(1px 1px at 57% 33%, rgba(255,255,255,0.4), transparent),
  radial-gradient(1px 1px at 63% 5%, rgba(255,255,255,0.5), transparent),
  radial-gradient(1px 1px at 81% 67%, rgba(255,255,255,0.4), transparent); }
.stars-mid{ background-image:
  radial-gradient(1.5px 1.5px at 12% 18%, rgba(0,212,255,0.6), transparent),
  radial-gradient(1.5px 1.5px at 28% 62%, rgba(124,58,237,0.6), transparent),
  radial-gradient(1.5px 1.5px at 44% 33%, rgba(255,255,255,0.8), transparent),
  radial-gradient(1.5px 1.5px at 58% 78%, rgba(236,72,153,0.6), transparent),
  radial-gradient(1.5px 1.5px at 72% 14%, rgba(255,255,255,0.8), transparent),
  radial-gradient(1.5px 1.5px at 86% 56%, rgba(0,212,255,0.6), transparent),
  radial-gradient(1.5px 1.5px at 8% 84%, rgba(255,255,255,0.7), transparent),
  radial-gradient(1.5px 1.5px at 36% 88%, rgba(236,72,153,0.5), transparent),
  radial-gradient(1.5px 1.5px at 64% 42%, rgba(0,212,255,0.7), transparent),
  radial-gradient(1.5px 1.5px at 92% 28%, rgba(124,58,237,0.6), transparent); }
.stars-front{ background-image:
  radial-gradient(2px 2px at 15% 42%, rgba(0,212,255,1), transparent),
  radial-gradient(2px 2px at 38% 76%, rgba(255,255,255,1), transparent),
  radial-gradient(2.5px 2.5px at 62% 22%, rgba(124,58,237,1), transparent),
  radial-gradient(2px 2px at 82% 64%, rgba(236,72,153,0.9), transparent),
  radial-gradient(2px 2px at 24% 88%, rgba(0,212,255,0.9), transparent),
  radial-gradient(2.5px 2.5px at 76% 14%, rgba(255,255,255,1), transparent),
  radial-gradient(2px 2px at 48% 56%, rgba(124,58,237,0.9), transparent),
  radial-gradient(2px 2px at 90% 36%, rgba(0,212,255,0.95), transparent); }


.glow{ position:fixed; pointer-events:none; z-index:0; opacity:.4; }
.glow.cy{  width:520px; height:520px; top:-160px; left:-100px; background:radial-gradient(circle, rgba(0,212,255,.45) 0%, rgba(0,212,255,.18) 35%, transparent 70%); }
.glow.pu{  width:600px; height:600px; top:-180px; right:-160px; background:radial-gradient(circle, rgba(124,58,237,.45) 0%, rgba(124,58,237,.18) 35%, transparent 70%); }
.glow.pi{  width:480px; height:480px; top:40vh; right:30vw; background:radial-gradient(circle, rgba(236,72,153,.3) 0%, rgba(236,72,153,.12) 35%, transparent 70%); }



.skills-main{
  position:relative; z-index:1;
  width:100%;
  padding:96px 40px 64px;
}




.skills-hero{
  text-align:center;
  padding:48px 0 56px;
  position:relative;
}
.skills-hero-badge{
  display:inline-block;
  font-family:var(--font-mono);
  font-size:12.5px; font-weight:500;
  color:var(--accent-ink);
  background:var(--accent-bg);
  border:1px solid var(--border-glow, rgba(0,212,255,0.25));
  padding:6px 16px;
  border-radius:30px;
  margin-bottom:24px;
  letter-spacing:.02em;
}
.skills-hero-title{
  font-family:var(--font-display);
  font-weight:900;
  font-size:clamp(40px, 6vw, 64px);
  line-height:1.1;
  letter-spacing:-.03em;
  margin:0 0 18px;
  background:linear-gradient(135deg, #00D4FF 0%, #7C3AED 60%, #EC4899 100%);
  -webkit-background-clip:text;
  background-clip:text;
  -webkit-text-fill-color:transparent;
  text-shadow:0 0 80px rgba(0,212,255,0.25);
}
.skills-hero-sub{
  font-size:clamp(15px, 1.6vw, 18px);
  color:var(--ink-soft);
  margin:0 auto 36px;
  line-height:1.6;
  /* 2026-07-17: 改 inline-block 让 hero text-align:center 直接居中 sub 本身
     (去掉 max-width: sub 宽度 = 内容宽度, 视觉上文字明显在 hero 中央而非贴满固定 680px 块) */
  display:inline-block;
  text-align:center;
}
/* 2026-07-17 P0: hero 副标题整段横排一行不换行
   仅桌面端 (min-width: 769px) 生效, 移动端保留换行避免横向溢出
   (feedback_mobile_desktop_isolation 2026-07-10 + feedback_css_global_important 2026-07-10 隔离原则) */
@media (min-width: 769px) {
  .skills-hero-sub { white-space: nowrap; }
}
.skills-hero-stats{
  display:flex;
  justify-content:center;
  margin:0 auto;
  gap:48px;
  padding:18px 36px;
  background:var(--card-bg-soft);
  border:1px solid var(--glass-border);
  border-radius:16px;
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
}
.skills-stat{ text-align:center; }
.skills-stat-num{
  font-family:var(--font-mono);
  font-weight:700;
  font-size:26px;
  color:var(--ink);
  letter-spacing:-.01em;
  line-height:1.1;
  margin-bottom:4px;
}
.skills-stat-label{
  font-size:12px;
  color:var(--ink-soft);
  letter-spacing:.04em;
}




.skills-featured{
  display:flex; align-items:center; gap:24px;
  margin:0 0 28px;
  padding:24px 28px;
  background:linear-gradient(135deg, rgba(0,212,255,.12) 0%, rgba(124,58,237,.10) 60%, rgba(236,72,153,.06) 100%);
  border:1px solid rgba(0,212,255,.28);
  border-radius:16px;
  position:relative;
  overflow:hidden;
  transition:border-color .14s, box-shadow .14s, transform .14s;
  cursor:pointer;
}
.skills-featured:hover{
  border-color:rgba(0,212,255,.55);
  box-shadow:0 14px 40px rgba(0,212,255,.12);
  transform:translateY(-2px);
}
.skills-featured::before{
  content:"⭐ 推荐";
  position:absolute;
  top:14px; right:18px;
  font-family:var(--font-mono);
  font-size:11.5px; font-weight:600;
  color:var(--accent);
  background:rgba(0,212,255,.15);
  border:1px solid rgba(0,212,255,.4);
  padding:4px 10px;
  border-radius:20px;
  letter-spacing:.04em;
}
.skills-featured-avatar{
  width:64px; height:64px;
  border-radius:14px;
  display:flex; align-items:center; justify-content:center;
  font-family:var(--font-display);
  font-weight:700; font-size:28px;
  color:#fff;
  flex-shrink:0;
  box-shadow:0 4px 16px rgba(0,0,0,.3);
}
.skills-featured-main{ flex:1; min-width:0; }
.skills-featured-name{
  font-family:var(--font-display);
  font-weight:700; font-size:22px;
  letter-spacing:-.01em;
  color:var(--ink);
  margin:0 0 6px;
}
.skills-featured-name small{
  font-family:var(--font-mono);
  font-size:12px; font-weight:500;
  color:var(--ink-soft);
  margin-left:10px;
  letter-spacing:.02em;
}
.skills-featured-desc{
  font-size:14px;
  color:var(--ink-soft);
  line-height:1.6;
  margin:0 0 12px;
  max-width:780px;
}
.skills-featured-features{
  display:flex; flex-wrap:wrap; gap:6px;
}
.skills-featured-feature{
  font-family:var(--font-mono);
  font-size:11.5px;
  padding:4px 10px;
  border-radius:6px;
  background:var(--hover-overlay);
  border:1px solid var(--glass-border);
  color:var(--accent-ink);
}
.skills-featured-cta{
  display:flex; gap:8px; flex-shrink:0;
}
.skills-featured-btn{
  all:unset;
  cursor:pointer;
  font-family:var(--font-mono);
  font-size:13px; font-weight:600;
  padding:10px 18px;
  border-radius:9px;
  display:inline-flex; align-items:center; gap:6px;
  white-space:nowrap;
  transition:filter .14s, transform .14s, box-shadow .14s;
}
.skills-featured-btn.primary{
  background:linear-gradient(135deg, #00D4FF 0%, #7C3AED 100%);
  color:#fff;
  box-shadow:0 4px 16px rgba(0,212,255,.3);
}
.skills-featured-btn.primary:hover{
  filter:brightness(1.1);
  transform:translateY(-1px);
  box-shadow:0 6px 20px rgba(0,212,255,.4);
}
.skills-featured-btn.ghost{
  border:1px solid var(--glass-border);
  color:var(--ink);
}
.skills-featured-btn.ghost:hover{
  background:var(--hover-overlay-soft);
  border-color:rgba(0,212,255,.4);
  color:var(--accent);
}
.skills-featured-btn svg{ width:14px; height:14px; }
@media(max-width:820px){
  .skills-featured{ flex-direction:column; align-items:flex-start; padding:18px 20px; gap:14px; }
  .skills-featured::before{ top:10px; right:12px; font-size:10.5px; padding:3px 8px; }
  .skills-featured-avatar{ width:52px; height:52px; font-size:22px; border-radius:12px; }
  .skills-featured-name{ font-size:18px; }
  .skills-featured-desc{ font-size:13px; }
  .skills-featured-cta{ width:100%; }
  .skills-featured-btn{ flex:1; justify-content:center; padding:9px 12px; font-size:12.5px; }
}




.skills-toolbar{
  display:flex;
  align-items:center;
  gap:14px;
  margin-bottom:28px;
  flex-wrap:wrap;
}
.skills-search{
  display:flex; align-items:center; gap:8px;
  background:var(--card-bg);
  border:1px solid var(--glass-border);
  border-radius:10px;
  padding:11px 14px;
  flex:1; min-width:240px; max-width:340px;
  transition:border-color .14s;
}
.skills-search:focus-within{ border-color:var(--accent); box-shadow:0 0 0 3px rgba(0,212,255,0.12); }
.skills-search svg{ width:16px; height:16px; color:var(--ink-soft); flex-shrink:0; }
.skills-search input{
  all:unset; flex:1;
  font-size:14px; font-family:var(--font-body);
  color:var(--ink);
}
.skills-search input::placeholder{ color:var(--ink-soft); }

.skills-filters{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
  flex:1;
  min-width:0;
}
.skills-filter{
  all:unset;
  cursor:pointer;
  font-family:var(--font-mono);
  font-size:12.5px;
  font-weight:500;
  color:var(--ink-soft);
  background:var(--card-bg-strong);
  border:1px solid var(--glass-border);
  padding:7px 14px;
  border-radius:8px;
  white-space:nowrap;
  transition:color .14s, background .14s, border-color .14s;
}
.skills-filter:hover{ color:var(--ink); border-color:rgba(0,212,255,.35); }
.skills-filter.active{
  background:linear-gradient(135deg, rgba(0,212,255,.18), rgba(124,58,237,.18));
  color:var(--accent);
  border-color:rgba(0,212,255,.5);
  font-weight:600;
}
.skills-filter .count{
  display:inline-block;
  margin-left:6px;
  font-size:11px;
  opacity:.6;
}




.skills-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(300px, 1fr));
  gap:18px;
}
.skills-grid .card{
  background:var(--card-bg);
  border:1px solid var(--glass-border);
  border-radius:var(--radius);
  padding:20px;
  display:flex;
  flex-direction:column;
  cursor:pointer;
  transition:border-color .14s, transform .14s, box-shadow .14s;
  content-visibility:auto;
  contain-intrinsic-size:0 220px;
}
.skills-grid .card:hover{
  border-color:rgba(0,212,255,.45);
  transform:translateY(-2px);
  box-shadow:0 8px 32px rgba(0,212,255,.08);
}
.skills-grid .card-top{ display:flex; align-items:center; gap:11px; margin-bottom:14px; }
.skills-grid .card-name{
  font-family:var(--font-display);
  font-weight:600;
  font-size:16px;
  line-height:1.2;
  color:var(--ink);
  flex:1; min-width:0;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.skills-grid .card-vendor{
  font-size:12.5px;
  color:var(--ink-soft);
  margin-top:2px;
}
.skills-grid .avatar{
  width:38px; height:38px;
  border-radius:10px;
  flex-shrink:0;
  display:flex; align-items:center; justify-content:center;
  font-family:var(--font-display);
  font-weight:700;
  font-size:16px;
  color:#fff;
  overflow:hidden;
}
.skills-grid .avatar.av-logo{
  background:rgba(255,255,255,.92);
  border:1px solid var(--glass-border);
}
.skills-grid .avatar img{ width:100%; height:100%; object-fit:contain; padding:7px; }

.skills-grid .card-desc{
  font-size:13.5px;
  color:var(--ink-soft);
  line-height:1.55;
  margin:0 0 14px;
  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
  overflow:hidden;
  min-height:42px;
}
.skills-grid .tags{
  display:flex; flex-wrap:wrap; gap:6px;
  margin-bottom:auto;
}
.skills-grid .tag{
  font-family:var(--font-mono);
  font-size:11px;
  padding:3px 8px;
  border-radius:6px;
  background:var(--accent-bg);
  color:var(--accent-ink);
}
.skills-grid .tag.gray{ background:var(--hover-overlay-soft); color:var(--ink-soft); }

.skills-grid .card-stats{
  display:flex;
  align-items:center;
  gap:14px;
  border-top:1px solid var(--glass-border);
  padding-top:12px;
  margin-top:14px;
  font-family:var(--font-mono);
  font-size:12.5px;
  color:var(--ink-soft);
}
.skills-grid .card-stats .star{
  display:inline-flex; align-items:center; gap:4px;
  color:#fbbf24;
  font-weight:600;
}
.skills-grid .card-stats .star svg{ width:12px; height:12px; }
.skills-grid .card-stats .usage{ color:var(--ink-soft); }
.skills-grid .card-stats .usage b{ color:var(--ink); font-weight:600; }

.skills-grid .card-btn{
  margin-top:14px;
  text-align:center;
  font-weight:600;
  font-size:14px;
  padding:10px;
  border-radius:9px;
  border:1px solid var(--glass-border);
  color:var(--ink);
  transition:background .12s, color .12s, border-color .12s;
}
.skills-grid .card:hover .card-btn{
  background:var(--accent);
  color:#0A0E1A;
  border-color:var(--accent);
}

.skills-empty{
  color:var(--ink-soft);
  font-size:14px;
  padding:60px 0;
  display:none;
  text-align:center;
}


.skills-loadmore{
  display:flex;
  justify-content:center;
  margin:36px 0 12px;
}
.skills-loadmore-btn{
  all:unset;
  cursor:pointer;
  display:inline-flex;
  align-items:center;
  gap:10px;
  font-family:var(--font-mono);
  font-size:14px;
  font-weight:600;
  color:var(--ink);
  background:var(--card-bg);
  border:1px solid var(--glass-border);
  padding:14px 32px;
  border-radius:12px;
  letter-spacing:.02em;
  transition:background .14s, border-color .14s, color .14s, transform .14s;
}
.skills-loadmore-btn small{
  font-weight:400;
  color:var(--ink-soft);
  font-size:12px;
  margin-left:4px;
}
.skills-loadmore-btn svg{
  width:18px; height:18px;
  color:var(--ink-soft);
  transition:transform .14s, color .14s;
}
.skills-loadmore-btn:hover{
  background:linear-gradient(135deg, rgba(0,212,255,.18), rgba(124,58,237,.18));
  border-color:rgba(0,212,255,.5);
  color:var(--accent);
}
.skills-loadmore-btn:hover svg{
  transform:translateY(2px);
  color:var(--accent);
}
.skills-loadmore-done{
  color:var(--ink-soft);
  font-family:var(--font-mono);
  font-size:12.5px;
  padding:14px 0;
  letter-spacing:.04em;
  opacity:.7;
}




.scrim{
  position:fixed; inset:0;
  background:rgba(0,0,0,.55);
  opacity:0; visibility:hidden;
  transition:opacity .2s;
  z-index:1000;
}
.scrim.open{ opacity:1; visibility:visible; }
.drawer{
  position:fixed; top:0; right:0;
  height:100vh;
  background:var(--drawer-bg);
  border-left:1px solid var(--glass-border);
  box-shadow:var(--drawer-shadow);
  transform:translateX(100%);
  transition:transform .26s cubic-bezier(.4,0,.2,1);
  z-index:1001;
  display:flex;
  flex-direction:column;
}
.skills-drawer{
  width:950px;
  max-width:96vw;
}
.skills-drawer.open{ transform:translateX(0); }
.dw-close{
  all:unset;
  cursor:pointer;
  position:absolute;
  top:20px; right:22px;
  width:32px; height:32px;
  display:flex; align-items:center; justify-content:center;
  border-radius:8px;
  color:var(--ink-soft);
  z-index:2;
}
.dw-close:hover{ background:var(--hover-overlay-strong); color:var(--ink); }
.dw-head{ padding:24px 26px 0; }
.dw-title{ display:flex; align-items:center; gap:12px; }
.dw-title .avatar{ width:42px; height:42px; border-radius:11px; display:flex; align-items:center; justify-content:center; line-height:1; font-size:18px; font-family:var(--font-display); font-weight:700; flex-shrink:0; }
.dw-name{
  font-family:var(--font-display);
  font-weight:700;
  font-size:20px;
  letter-spacing:-.01em;
  color:var(--ink);
  flex:1; min-width:0;
  overflow:hidden; text-overflow:ellipsis;
}
.dw-sub{
  font-size:13px;
  color:var(--ink-soft);
  margin:10px 0 12px;
  display:flex; align-items:center; gap:8px; flex-wrap:wrap;
}
.dw-sub .tag{ font-family:var(--font-mono); font-size:11px; padding:3px 8px; border-radius:6px; background:var(--accent-bg); color:var(--accent-ink); }
.dw-desc{
  font-size:14px;
  line-height:1.7;
  color:var(--ink);
  margin:0 0 18px;
}
.skills-dw-meta{
  display:flex; gap:10px; flex-wrap:wrap;
  margin-bottom:18px;
}
.skills-dw-meta .metric{
  background:var(--hover-overlay);
  border:1px solid var(--glass-border);
  border-radius:11px;
  padding:11px 14px;
  flex:1;
  min-width:120px;
}
.skills-dw-meta .mk{ font-size:11.5px; color:var(--ink-soft); margin-bottom:4px; }
.skills-dw-meta .mv{
  font-family:var(--font-mono);
  font-weight:600;
  font-size:17px;
  color:var(--ink);
  display:flex; align-items:center; gap:5px;
}
.skills-dw-meta .mv svg{ width:14px; height:14px; color:#fbbf24; }
.dw-body{ flex:1; overflow-y:auto; padding:4px 26px 48px; }

.dw-card{
  border:1px solid var(--glass-border);
  background:var(--hover-overlay);
  border-radius:12px;
  padding:22px 24px;
  margin-bottom:18px;
}
.dw-card h4{
  font-family:var(--font-display);
  font-weight:600;
  font-size:15px;
  margin:0 0 14px;
  display:flex; align-items:center; justify-content:space-between;
  color:var(--ink);
}
.dw-card .kk{ font-size:12px; color:var(--ink-soft); margin-bottom:4px; }
.dw-card .vv{ font-weight:600; font-size:14px; color:var(--ink); }
.kv{ display:grid; grid-template-columns:1fr 1fr; gap:14px 18px; }

.scenes{ list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:9px; }
.scenes li{
  font-size:13.5px;
  padding-left:22px;
  position:relative;
  line-height:1.55;
  color:var(--ink);
}
.scenes li::before{
  content:"✓";
  position:absolute;
  left:0;
  color:var(--ok);
  font-weight:700;
}


.features{
  list-style:none;
  padding:0; margin:0;
  display:flex; flex-wrap:wrap; gap:7px;
}
.features li{
  font-family:var(--font-mono);
  font-size:12px;
  font-weight:500;
  padding:5px 11px;
  border-radius:7px;
  background:linear-gradient(135deg, rgba(0,212,255,.10), rgba(124,58,237,.10));
  color:var(--accent-ink);
  border:1px solid rgba(0,212,255,.18);
}


.audience{
  display:flex; flex-wrap:wrap; gap:10px;
}
.audience-item{
  display:flex; align-items:center; gap:8px;
  background:var(--hover-overlay);
  border:1px solid var(--glass-border);
  border-radius:9px;
  padding:8px 12px 8px 8px;
  font-size:13px;
  color:var(--ink);
  flex:1; min-width:160px;
}
.audience-icon{
  width:28px; height:28px;
  border-radius:7px;
  display:flex; align-items:center; justify-content:center;
  font-size:14px;
  background:rgba(0,212,255,.12);
  flex-shrink:0;
}
.audience-icon.ic-eng{ background:rgba(0,212,255,.18); color:#7CD9FF; }
.audience-icon.ic-pm{ background:rgba(124,58,237,.18); color:#C4B5FD; }
.audience-icon.ic-ops{ background:rgba(16,185,129,.18); color:#6EE7B7; }
.audience-icon.ic-dev{ background:rgba(245,158,11,.18); color:#FCD34D; }
.audience-icon.ic-cto{ background:rgba(236,72,153,.18); color:#F9A8D4; }
.audience-icon.ic-data{ background:rgba(20,184,166,.18); color:#5EEAD4; }
.audience-icon.ic-pro{ background:rgba(99,102,241,.18); color:#A5B4FC; }
.audience-icon.ic-creator{ background:rgba(244,114,182,.18); color:#F9A8D4; }
.audience-icon.ic-edu{ background:rgba(251,191,36,.18); color:#FDE68A; }

.skills-dw-cta{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  width:100%;
  padding:16px 20px;
  margin-top:8px;
  background:linear-gradient(135deg, #00D4FF 0%, #7C3AED 100%);
  color:#fff;
  font-weight:700;
  font-size:15px;
  border-radius:12px;
  border:1px solid transparent;
  box-shadow:0 6px 0 0 rgba(0,0,0,.3), 0 8px 20px rgba(0,212,255,0.4);
  transition:transform .14s, box-shadow .14s, filter .14s;
  text-decoration:none;
}
.skills-dw-cta:hover{
  filter:brightness(1.1);
  transform:translateY(-1px);
  box-shadow:0 7px 0 0 rgba(0,0,0,.3), 0 10px 24px rgba(0,212,255,0.5);
}
.skills-dw-cta:active{ transform:translateY(2px); box-shadow:0 3px 0 0 rgba(0,0,0,.3), 0 4px 10px rgba(0,212,255,0.3); }
.skills-dw-cta svg{ width:18px; height:18px; }
.skills-dw-cta > svg:last-child{ width:14px; height:14px; opacity:.85; }




@media(max-width:820px){
  .skills-main{ padding:80px 18px 48px; }
  .skills-hero{ padding:24px 0 36px; }
  .skills-hero-stats{ gap:28px; padding:14px 24px; }
  .skills-stat-num{ font-size:22px; }
  .skills-toolbar{ flex-direction:column; align-items:stretch; }
  .skills-search{ max-width:none; }
  .skills-filters{
    flex-wrap:nowrap;
    overflow-x:auto;
    overflow-y:hidden;
    -webkit-overflow-scrolling:touch;
    scrollbar-width:thin;
    margin:0 -18px;
    padding:0 18px 6px;
  }
  .skills-filter{ flex-shrink:0; }
  .skills-grid{ grid-template-columns:1fr; gap:14px; }
  .skills-drawer{ width:100%; max-width:100%; }
}

@media(prefers-reduced-motion:reduce){ *{ transition:none !important; } }
button:focus-visible, a:focus-visible, input:focus-visible{ outline:2px solid var(--accent); outline-offset:3px; }