:root{
  --paper:var(--text);
  --dim:var(--text-secondary);
  --panel:var(--surface);
  --line:var(--border);
  --hair:rgba(245,245,247,0.08);
  --mono:var(--font-mono);
  --cyber:var(--font-display);
  --accent2:var(--accent-hover);
  --accent-rgb:249,115,22;
  --accent2-rgb:251,146,60;
}

.starfield-canvas{
  position:fixed;
  inset:0;
  z-index:-1;
  display:block;
  pointer-events:none;
}

.wu-hero{
  max-width:1080px; margin:0 auto; padding:88px 6vw 48px; text-align:center;

  position:relative;
}
.wu-hero::before{
  content:'';
  position:absolute; left:50%; top:38%; width:min(560px, 90vw); height:min(360px, 60vw);
  transform:translate(-50%,-50%); z-index:-1; pointer-events:none;
  background:radial-gradient(closest-side, rgba(var(--accent-rgb),0.07), transparent 72%);
}
.wu-hero .prompt{margin-bottom:14px;}
.wu-hero h1{
  font-family:var(--cyber); font-size:clamp(1.9rem,4.5vw,2.6rem); font-weight:900;
  margin-bottom:14px; letter-spacing:0.02em;
  color:var(--paper);
}
.wu-hero p{color:var(--dim); max-width:60ch; margin:0 auto; font-size:1.02rem;}

.wu-controls{
  max-width:1080px; margin:0 auto 8px; padding:0 6vw;
  display:flex; flex-wrap:wrap; gap:12px; align-items:center; justify-content:space-between;
}
.wu-search{
  flex:1 1 240px; display:flex; align-items:center; gap:8px;
  background:var(--panel); border:1px solid var(--line); border-radius:0;
  padding:11px 15px; font-size:0.92rem;
  transition:border-color 0.25s var(--ease), box-shadow 0.25s var(--ease);
}
.wu-search:focus-within{
  border-color:var(--accent);
  box-shadow:0 0 0 3px rgba(var(--accent-rgb),0.1);
}
.wu-search svg{width:15px; height:15px; color:var(--dim); flex-shrink:0; transition:color 0.25s var(--ease);}
.wu-search:focus-within svg{color:var(--accent);}
.wu-search input{
  flex:1; min-width:0; background:transparent; border:none; outline:none;
  color:var(--paper); font-size:0.92rem; caret-color:var(--accent);
}
.wu-search input::placeholder{color:var(--dim);}

.wu-filters{display:flex; flex-wrap:wrap; gap:8px;}
.wu-filter-btn{
  font-size:0.85rem; letter-spacing:0.01em;
  padding:9px 14px; border-radius:0; border:1px solid var(--line);
  background:var(--panel); color:var(--dim); cursor:pointer;
  transition:border-color 0.25s var(--ease), color 0.25s var(--ease), background 0.25s var(--ease), box-shadow 0.25s var(--ease);
}
.wu-filter-btn:hover{border-color:var(--accent); color:var(--paper);}
.wu-filter-btn.active{
  border-color:var(--accent); color:#0b0d12; background:var(--accent); font-weight:600;
}

.wu-explorer{
  max-width:1080px; margin:28px auto 0; padding:0 6vw 100px;
}
.wu-explorer-card{
  border-radius:0; overflow:hidden;
  border:1px solid var(--line);
  box-shadow:0 6px 18px rgba(0,0,0,0.22);
}
.wu-listing{
  background:var(--panel);
}
.wu-listing-head{
  display:grid; grid-template-columns:1fr 160px 150px 24px;
  gap:20px; padding:14px 26px;
  font-family:var(--mono); font-size:0.72rem; letter-spacing:0.09em; text-transform:uppercase;
  color:var(--dim); background:rgba(255,255,255,0.02);
  border-bottom:1px solid var(--line);
}
.wu-row{
  position:relative;
  display:grid; grid-template-columns:1fr 160px 150px 24px;
  align-items:center; gap:20px; padding:24px 26px 24px 29px;
  border-bottom:1px solid var(--hair);
  text-decoration:none; color:inherit;
  transition:background 0.2s var(--ease), padding-left 0.2s var(--ease);
  animation:wuRowIn 0.5s var(--ease) backwards;
  animation-delay:calc(var(--i, 0) * 45ms);
}
@keyframes wuRowIn{
  from{opacity:0; transform:translateY(10px);}
  to{opacity:1; transform:translateY(0);}
}
.wu-row::before{
  content:''; position:absolute; left:0; top:0; bottom:0; width:3px;
  background:linear-gradient(180deg, var(--accent), var(--accent2));
  transform:scaleY(0); transition:transform 0.25s var(--ease);
  transform-origin:center;
}
.wu-row:last-child{border-bottom:none;}
.wu-row:hover{background:rgba(var(--accent-rgb),0.05); padding-left:26px;}
.wu-row:hover::before{transform:scaleY(1);}
.wu-row-name{display:flex; align-items:center; min-width:0;}
.wu-row-name-text{min-width:0; width:100%;}
.wu-filename{
  font-size:1.02rem; font-weight:600; color:var(--paper);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis; display:block;
  transition:color 0.2s var(--ease);
}
.wu-row:hover .wu-filename{color:var(--accent);}
.wu-summary{
  font-size:0.88rem; color:var(--dim); margin-top:5px; line-height:1.5;
  white-space:normal; overflow:hidden; display:-webkit-box;
  -webkit-line-clamp:2; -webkit-box-orient:vertical;
}
.wu-row-tags{display:flex; flex-wrap:wrap; gap:6px; margin-top:10px;}
.wu-row-tags .tag{font-size:0.7rem; padding:3px 9px;}
.wu-col{font-size:0.92rem; color:var(--dim);}
.wu-diff{
  display:inline-flex; align-items:center;
  font-family:var(--mono); font-size:0.76rem; font-weight:600;
  padding:5px 11px; border-radius:0; border:1px solid transparent; width:fit-content;
}
.wu-diff-easy{color:#34d399; background:rgba(52,211,153,0.1); border-color:rgba(52,211,153,0.3);}
.wu-diff-medium{color:#fbbf24; background:rgba(251,191,36,0.1); border-color:rgba(251,191,36,0.3);}
.wu-diff-hard{color:#fb7185; background:rgba(251,113,133,0.1); border-color:rgba(251,113,133,0.3);}
.wu-diff-insane{color:#a78bfa; background:rgba(167,139,250,0.1); border-color:rgba(167,139,250,0.3);}
.wu-row-arrow{
  color:var(--accent); opacity:0; transform:translateX(-4px);
  transition:opacity 0.2s var(--ease), transform 0.2s var(--ease);
  display:flex; align-items:center; justify-content:center;
}
.wu-row-arrow svg{width:16px; height:16px;}
.wu-row:hover .wu-row-arrow{opacity:1; transform:translateX(0);}

.wu-empty{
  padding:60px 18px; text-align:center; font-family:var(--mono); font-size:0.9rem; color:var(--dim);
}

@media (max-width:680px){
  .wu-listing-head{display:none;}
  .wu-row{
    grid-template-columns:1fr; gap:10px; padding:20px 18px 20px 21px;
  }
  .wu-row-arrow{display:none;}
  .wu-col{font-size:0.76rem;}
}


.wu-article-wrap{
  max-width:820px; margin:0 auto; padding:48px 6vw 100px;
}
.wu-back{
  display:inline-flex; align-items:center; gap:6px;
  font-family:var(--mono); font-size:0.82rem; color:var(--accent2);
  text-decoration:none; margin-bottom:28px;
  transition:gap 0.2s var(--ease), color 0.2s var(--ease);
}
.wu-back:hover{gap:10px; color:var(--accent);}
.wu-back svg{width:14px; height:14px;}

.wu-meta-window{
  border-radius:0; overflow:hidden; margin-bottom:36px;
  border:1px solid var(--line);
  box-shadow:0 6px 18px rgba(0,0,0,0.22);
}
.wu-meta-body{
  background:var(--panel);
  padding:26px 24px;
}
.wu-title{
  font-family:var(--cyber); font-weight:900; font-size:1.6rem; letter-spacing:0.01em;
  margin-bottom:14px; color:var(--paper);
}
.wu-meta-row{display:flex; flex-wrap:wrap; gap:8px; align-items:center; margin-bottom:12px;}
.wu-meta-row:last-child{margin-bottom:0;}
.wu-meta-label{font-family:var(--mono); font-size:0.72rem; color:var(--dim); text-transform:uppercase; letter-spacing:0.08em; margin-right:4px;}
.wu-summary-text{color:var(--dim); font-size:0.95rem; line-height:1.7;}

.wu-content{
  color:var(--paper); font-size:1.02rem; line-height:1.8;
}
.wu-content h2{
  display:block; font-size:1.25rem; text-align:left; margin:44px 0 16px; padding-bottom:10px;
  border-bottom:1px solid var(--hair); text-shadow:none;
}
.wu-content h2::before, .wu-content h2::after{display:none;}
.wu-content h3{
  font-family:var(--cyber); font-weight:700; font-size:1.05rem; margin:30px 0 12px; color:var(--accent2);
}
.wu-content p{margin-bottom:18px; color:var(--paper); text-align:left;}
.wu-content ul, .wu-content ol{margin:0 0 18px 22px; color:var(--paper);}
.wu-content li{margin-bottom:6px; text-align:left;}
.wu-content a{color:var(--accent2); text-decoration:underline; text-decoration-color:rgba(var(--accent2-rgb),0.35);}
.wu-content a:hover{color:var(--accent);}
.wu-content strong{color:var(--accent2); font-weight:600;}
.wu-content blockquote{
  border-left:3px solid var(--accent); padding:4px 0 4px 16px; margin:0 0 18px;
  color:var(--dim); font-style:italic;
}
.wu-content img{max-width:100%; border-radius:0; border:1px solid var(--line); margin:8px 0 18px;}
.wu-content hr{border:none; border-top:1px solid var(--hair); margin:36px 0;}
.wu-content code{
  font-family:var(--mono); font-size:0.86em; color:var(--accent2);
  background:rgba(var(--accent-rgb),0.08); padding:2px 6px; border-radius:0;
}
.wu-content pre{
  background:#050202; border:1px solid var(--line); border-radius:0;
  padding:16px 18px; overflow-x:auto; margin:0 0 20px;
  -webkit-mask-image:linear-gradient(to bottom, transparent 0, #000 10px, #000 calc(100% - 10px), transparent 100%);
  mask-image:linear-gradient(to bottom, transparent 0, #000 10px, #000 calc(100% - 10px), transparent 100%);
}
.wu-content pre code{
  background:none; padding:0; color:var(--paper); font-size:0.85rem; line-height:1.65;
}
.wu-content table{width:100%; border-collapse:collapse; margin:0 0 20px; font-size:0.9rem;}
.wu-content th, .wu-content td{
  border:1px solid var(--line); padding:9px 12px; text-align:left;
}
.wu-content th{background:rgba(var(--accent-rgb),0.06); color:var(--accent2); font-family:var(--mono); font-size:0.78rem;}

.hljs-keyword, .hljs-selector-tag, .hljs-literal{color:#fb7185;}
.hljs-string, .hljs-attr{color:#34d399;}
.hljs-comment{color:var(--dim); font-style:italic;}
.hljs-number{color:#a78bfa;}
.hljs-title, .hljs-function, .hljs-built_in{color:var(--accent2);}
.hljs-variable, .hljs-params{color:#7dd3fc;}

.wu-loading, .wu-error{
  text-align:center; padding:60px 0; font-family:var(--mono); color:var(--dim); font-size:0.9rem;
}
.wu-error{color:#fb7185;}

.wu-footer-nav{
  margin-top:56px; padding-top:24px; border-top:1px solid var(--hair);
  display:flex; justify-content:center;
}