:root {
  --bg: #0d0d0d; --bg2: #111; --bg3: #161616;
  --border: #1f1f1f; --border2: #2b2b2b;
  --red: #c0392b; --red2: #e74c3c; --red-dim: #7b2d28;
  --red-glow: rgba(192,57,43,0.10);
  --fg: #ccc; --fg-dim: #666; --fg-dark: #3a3a3a;
  --green: #2ecc71; --cyan: #00b4d8; --yellow: #f1c40f; --white: #eee;
  --font: 'JetBrains Mono', 'Courier New', monospace;
}
* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { background: var(--bg); color: var(--fg); font-family: var(--font); font-size: 13px; line-height: 1.7; min-height: 100vh; }
a { color: var(--cyan); text-decoration: none; }
a:hover { color: var(--white); text-decoration: underline; }
::selection { background: var(--red-dim); color: var(--white); }
::-webkit-scrollbar { width: 3px; }
::-webkit-scrollbar-thumb { background: var(--red-dim); }
body::before { content: ''; position: fixed; inset: 0; background: repeating-linear-gradient(0deg,transparent,transparent 2px,rgba(0,0,0,0.025) 2px,rgba(0,0,0,0.025) 4px); pointer-events: none; z-index: 9999; }
.site { max-width: 820px; margin: 0 auto; min-height: 100vh; display: flex; flex-direction: column; }
.path-nav { display: flex; flex-wrap: wrap; gap: 1.4rem; margin: 0 0 1.6rem; padding-bottom: 1rem; border-bottom: 1px solid var(--border); font-size: 12px; }
.path-nav a { color: var(--fg-dim); text-decoration: none; }
.path-nav a:hover, .path-nav a.active { color: var(--white); }
.path-nav a .tilde { color: var(--fg-dark); }
.path-nav a:hover .tilde, .path-nav a.active .tilde { color: var(--red2); }
.dot { display: inline-block; width: 6px; height: 6px; background: var(--green); border-radius: 50%; margin-right: 4px; animation: pulse 2s ease-in-out infinite; }
@keyframes pulse { 0%,100%{opacity:1} 50%{opacity:0.3} }
main { flex: 1; padding: 2.2rem 1.5rem; max-width: 820px; margin: 0 auto; width: 100%; }
footer { padding: 0.8rem 1.5rem; border-top: 1px solid var(--border); color: var(--fg-dim); font-size: 11px; display: flex; justify-content: space-between; max-width: 820px; margin: 0 auto; width: 100%; }
footer a { color: var(--red2); }
.ascii { font-size: 9px; line-height: 1.25; color: var(--red2); white-space: pre; margin-bottom: 1.2rem; overflow-x: auto; }
.prompt-l { color: var(--fg-dim); font-size: 12px; margin-bottom: 1.2rem; }
.prompt-l .u { color: var(--green); }
.prompt-l .h { color: var(--cyan); }
.cmd { margin: 1.2rem 0; }
.cmd-line { display: flex; align-items: center; gap: 6px; margin-bottom: 5px; }
.cmd-line .d { color: var(--red2); font-weight: 700; }
.cmd-line .c { color: var(--cyan); }
.cmd-line .a { color: var(--fg); }
.cmd-out { background: var(--bg2); border: 1px solid var(--border); border-left: 2px solid var(--red); padding: 0.8rem 1rem; border-radius: 0 4px 4px 0; margin-left: 1rem; font-size: 12px; }
pre.cb { background: var(--bg2); border: 1px solid var(--border); padding: 1rem 1.2rem; border-radius: 4px; overflow-x: auto; font-size: 12px; line-height: 1.6; margin: 0.8rem 0; white-space: pre-wrap; }
hr.sep { border: none; border-top: 1px solid var(--border); margin: 1.5rem 0; }
.wlist { display: flex; flex-direction: column; gap: 4px; margin: 0.8rem 0; }
.wcard { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 0.8rem; padding: 0.7rem 1rem; background: var(--bg2); border: 1px solid var(--border); border-radius: 4px; transition: border-color 0.15s, background 0.15s; text-decoration: none; color: inherit; }
.wcard:hover { border-color: var(--red-dim); background: var(--red-glow); text-decoration: none; }
.wcard .wt { color: var(--white); font-size: 13px; font-weight: 500; }
.wcard .wm { color: var(--fg-dim); font-size: 11px; margin-top: 2px; }
.wbadges { display: flex; gap: 4px; flex-wrap: wrap; justify-content: flex-end; }
.badge { padding: 2px 6px; border-radius: 3px; font-size: 10px; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; }
.htb { background: #0a1f12; color: #2ecc71; border: 1px solid #1a4a2a; }
.thm { background: #12141f; color: #7289da; border: 1px solid #2a2f5a; }
.easy { background: #0a1f12; color: #2ecc71; border: 1px solid #1a4a2a; }
.med { background: #1f1a0a; color: #f39c12; border: 1px solid #4a360a; }
.hard { background: #1f0a0a; color: #e74c3c; border: 1px solid #5a1a1a; }
.soon { background: #1a1a1a; color: #888; border: 1px solid #2b2b2b; }
.tree { font-size: 12px; line-height: 2; }
.tree .td { color: var(--cyan); }
.plist { display: flex; flex-direction: column; gap: 4px; }
.pitem { display: flex; justify-content: space-between; align-items: flex-start; padding: 0.7rem 1rem; background: var(--bg2); border: 1px solid var(--border); border-radius: 4px; transition: border-color 0.15s, background 0.15s; text-decoration: none; color: inherit; }
.pitem:hover { border-color: var(--red-dim); background: var(--red-glow); text-decoration: none; }
.pitem .pt { color: var(--white); font-size: 13px; }
.pitem .pm { color: var(--fg-dim); font-size: 11px; margin-top: 2px; }
.pitem .pd { color: var(--fg-dim); font-size: 11px; white-space: nowrap; margin-left: 1rem; }
.sgrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 0.8rem; margin: 0.8rem 0; }
.scard { background: var(--bg2); border: 1px solid var(--border); border-radius: 4px; padding: 1rem; }
.scard .st { color: var(--red2); font-size: 10px; text-transform: uppercase; letter-spacing: 0.1em; margin-bottom: 0.6rem; }
.scard ul { list-style: none; }
.scard ul li { font-size: 11px; padding: 3px 0; border-bottom: 1px solid var(--border); color: var(--fg); }
.scard ul li:last-child { border-bottom: none; }
.scard ul li::before { content: '▸ '; color: var(--red2); }
.pgrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 0.8rem; margin: 0.8rem 0; }
.pcard { background: var(--bg2); border: 1px solid var(--border); border-radius: 4px; padding: 1rem; transition: border-color 0.15s, background 0.15s; }
.pcard:hover { border-color: var(--red-dim); background: var(--red-glow); }
.pcard .pn { color: var(--white); font-size: 13px; font-weight: 700; margin-bottom: 0.4rem; }
.pcard .pn .pi { color: var(--red2); }
.pcard .pd2 { color: var(--fg-dim); font-size: 11px; line-height: 1.6; margin-bottom: 0.6rem; }
.ptags { display: flex; flex-wrap: wrap; gap: 4px; }
.ptag { font-size: 10px; padding: 2px 6px; background: var(--bg3); border: 1px solid var(--border2); border-radius: 3px; color: var(--fg-dim); }
.ptable { border-collapse: collapse; width: 100%; margin: 0.6rem 0; }
.ptable td { padding: 4px 0.8rem 4px 0; vertical-align: top; font-size: 12px; border-bottom: 1px solid var(--border); }
.ptable td:first-child { color: var(--fg-dim); width: 110px; }
.stat-bar { display: flex; gap: 1rem; flex-wrap: wrap; padding: 0.6rem 1rem; background: var(--bg2); border: 1px solid var(--border); border-left: 2px solid var(--green); border-radius: 0 4px 4px 0; font-size: 11px; margin: 1rem 0; }
.stat-item { color: var(--fg-dim); }
.stat-item .sv { color: var(--green); }
.stat-item .sv.r { color: var(--red2); }
.section-lbl { color: var(--fg-dim); font-size: 11px; text-transform: uppercase; letter-spacing: 0.1em; margin-bottom: 0.6rem; }
.section-lbl a { color: var(--red2); font-size: 10px; }
.back-link { color: var(--red2); font-size: 12px; margin-top: 1.5rem; display: inline-block; }
.back-link:hover { color: var(--white); text-decoration: none; }
.cursor { display: inline-block; width: 7px; height: 1em; background: var(--red2); vertical-align: text-bottom; animation: blink 1s step-end infinite; }
@keyframes blink { 0%,100%{opacity:1} 50%{opacity:0} }
@media (max-width: 700px) { main { padding: 1.5rem 1.2rem; } footer { padding: 0.8rem 1.2rem; } .wcard { grid-template-columns: 1fr; } footer { flex-direction: column; gap: 0.5rem; } .path-nav { gap: 0.9rem; } }