:root{--c-bg:#0e0f12;--c-card:#151723;--c-text:#e9ecf1;--c-muted:#a6adbb;--c-accent:#c33;}
*{box-sizing:border-box}
body{margin:0;background:var(--c-bg);color:var(--c-text);font-family:system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;line-height:1.5}
a{color:inherit;text-decoration:none}
.hh-container{max-width:1100px;margin:0 auto;padding:0 16px}
.hh-header{position:sticky;top:0;background:rgba(14,15,18,.92);backdrop-filter:blur(8px);border-bottom:1px solid rgba(255,255,255,.06);z-index:10}
.hh-header .hh-container{display:flex;align-items:center;gap:18px;padding:14px 16px}
.hh-logo{font-weight:800;letter-spacing:.3px}
.hh-nav{display:flex;gap:14px;flex-wrap:wrap}
.hh-nav a{color:var(--c-muted)}
.hh-nav a:hover{color:var(--c-text)}
.hh-main{padding:22px 0 40px}
.hh-card{background:var(--c-card);border:1px solid rgba(255,255,255,.06);border-radius:14px;padding:16px}
.hh-grid{display:grid;grid-template-columns:repeat(12,1fr);gap:16px}
.hh-col-8{grid-column:span 8}
.hh-col-4{grid-column:span 4}
@media (max-width: 900px){.hh-col-8,.hh-col-4{grid-column:span 12}}

.hh-post-title{font-size:28px;margin:0 0 10px}
.hh-muted{color:var(--c-muted)}
.hh-thumb{border-radius:14px;overflow:hidden;border:1px solid rgba(255,255,255,.06)}
.hh-thumb img{display:block;width:100%;height:auto}

.hh-list{display:flex;flex-direction:column;gap:12px}
.hh-item{display:flex;gap:12px;align-items:flex-start}
.hh-item h3{margin:0;font-size:18px}
.hh-item .hh-meta{font-size:13px;color:var(--c-muted)}
.hh-item .hh-excerpt{margin:6px 0 0;color:var(--c-text);opacity:.9}

.hh-btn{display:inline-flex;align-items:center;gap:8px;background:rgba(195,51,51,.15);border:1px solid rgba(195,51,51,.5);color:var(--c-text);padding:10px 12px;border-radius:12px}
.hh-btn:hover{background:rgba(195,51,51,.22)}

.hh-footer{border-top:1px solid rgba(255,255,255,.06);padding:20px 0;color:var(--c-muted)}

/* Compare slider */
.hh-compare{margin:18px 0}
.hh-compare-inner{position:relative;border-radius:14px;overflow:hidden;border:1px solid rgba(255,255,255,.06);background:#000}
.hh-compare-img{display:block;width:100%;height:auto;user-select:none;pointer-events:none}
.hh-compare-before-wrap{position:absolute;left:0;top:0;height:100%;overflow:hidden}
.hh-compare-range{position:absolute;left:10px;right:10px;bottom:10px;z-index:5}
.hh-compare-label{position:absolute;top:10px;padding:6px 10px;border-radius:12px;background:rgba(0,0,0,.55);border:1px solid rgba(255,255,255,.12);font-size:12px}
.hh-compare-label-before{left:10px}
.hh-compare-label-after{right:10px}

/* Comments */
.hh-comments h2{margin:0 0 10px}
.hh-comment{padding:10px 0;border-top:1px solid rgba(255,255,255,.06)}
.hh-comment:first-child{border-top:none}
.hh-form label{display:block;margin:10px 0 6px}
.hh-form input,.hh-form textarea{width:100%;padding:10px 12px;border-radius:12px;border:1px solid rgba(255,255,255,.12);background:rgba(0,0,0,.25);color:var(--c-text)}
.hh-form textarea{min-height:120px}