:root{
  --bg:#0b0b0c;
  --bg-raised:#131314;
  --line:#232325;
  --text:#e9e6e1;
  --text-muted:#8a8681;
  --text-faint:#4c4946;
  --accent:#e6a23c;
  --accent-soft:rgba(230,162,60,0.12);
  --danger:#c1554a;
  --mono:'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
  --sans:'IBM Plex Sans', -apple-system, system-ui, sans-serif;
  --maxw:960px;
}
*{ box-sizing:border-box; }
html,body{ margin:0; padding:0; }
body{
  background:
    repeating-linear-gradient(0deg, rgba(255,255,255,0.012) 0px, rgba(255,255,255,0.012) 1px, transparent 1px, transparent 3px),
    var(--bg);
  color:var(--text);
  font-family:var(--sans);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  min-height:100vh;
}
a{ color:inherit; text-decoration:none; }
button{ font-family:inherit; cursor:pointer; }
::selection{ background:var(--accent-soft); color:var(--accent); }
:focus-visible{ outline:2px solid var(--accent); outline-offset:2px; }

#app{ max-width:var(--maxw); margin:0 auto; padding:0 20px 80px; }

.site-header{
  display:flex; align-items:center; justify-content:space-between;
  padding:32px 0 20px; gap:12px;
  border-bottom:1px solid var(--line);
  margin-bottom:36px;
  flex-wrap:wrap;
}
.brand{ display:flex; align-items:baseline; gap:8px; font-family:var(--mono); }
.brand .prompt{ color:var(--accent); }
.brand-name{ font-size:17px; font-weight:600; letter-spacing:0.01em; }
.cursor{ color:var(--accent); animation:blink 1.1s steps(1) infinite; }
@media (prefers-reduced-motion: reduce){ .cursor{ animation:none; opacity:1; } }
@keyframes blink{ 50%{ opacity:0; } }
.tagline{ font-size:12.5px; color:var(--text-faint); font-family:var(--mono); margin-top:4px; }

nav{ display:flex; gap:8px; align-items:center; }
.btn-ghost{
  background:none; border:1px solid var(--line); color:var(--text-muted);
  font-family:var(--mono); font-size:12.5px; padding:7px 12px; border-radius:3px;
  transition:border-color .15s, color .15s; display:inline-block;
}
.btn-ghost:hover{ border-color:var(--accent); color:var(--accent); }
.btn-icon{
  background:none; border:1px solid var(--line); color:var(--text-muted);
  width:32px; height:32px; border-radius:3px; font-size:14px;
  display:flex; align-items:center; justify-content:center;
  transition:border-color .15s, color .15s;
}
.btn-icon:hover{ border-color:var(--accent); color:var(--accent); }

.btn-primary{
  background:var(--accent); border:1px solid var(--accent); color:#151107;
  font-family:var(--mono); font-weight:600; font-size:12.5px; padding:9px 16px; border-radius:3px;
  display:inline-block;
}
.btn-primary:hover{ filter:brightness(1.08); }
.btn-danger{
  background:none; border:1px solid var(--danger); color:var(--danger);
  font-family:var(--mono); font-size:12px; padding:7px 12px; border-radius:3px;
}
.btn-danger:hover{ background:rgba(193,85,74,0.1); }

.flash{
  font-family:var(--mono); font-size:12.5px; color:var(--accent);
  border:1px solid var(--accent); background:var(--accent-soft);
  padding:10px 14px; border-radius:4px; margin-bottom:24px;
}

.tagrow{ display:flex; flex-wrap:wrap; gap:8px; margin-bottom:28px; }
.tag-chip{
  font-family:var(--mono); font-size:11.5px; color:var(--text-muted);
  border:1px solid var(--line); padding:4px 9px; border-radius:20px;
  transition:border-color .15s, color .15s;
}
.tag-chip:hover, .tag-chip.active{ border-color:var(--accent); color:var(--accent); }

.entry{
  position:relative;
  padding:16px 0 16px 16px;
  border-bottom:1px solid var(--line);
  transition:padding-left .15s;
}
.entry::before{
  content:''; position:absolute; left:0; top:16px; bottom:16px; width:2px;
  background:transparent; transition:background .15s;
}
.entry:hover{ padding-left:20px; }
.entry:hover::before{ background:var(--accent); }
.entry-meta{
  font-family:var(--mono); font-size:11.5px; color:var(--text-faint);
  display:flex; gap:10px; flex-wrap:wrap; margin-bottom:6px;
}
.entry-meta .date{ color:var(--text-muted); }
.entry-meta .tags{ color:var(--accent); opacity:0.75; }
.entry-title{ font-size:17px; font-weight:500; display:block; }
.entry-title:hover{ color:var(--accent); }

.empty{
  font-family:var(--mono); color:var(--text-faint); font-size:13.5px;
  padding:60px 0; text-align:center;
}

.back-link{
  display:inline-flex; align-items:center; gap:6px; font-family:var(--mono);
  font-size:12.5px; color:var(--text-muted); margin-bottom:24px;
}
.back-link:hover{ color:var(--accent); }
.post-title{ font-size:clamp(24px,5vw,32px); font-weight:600; line-height:1.25; margin:0 0 10px; }
.post-meta{
  font-family:var(--mono); font-size:12px; color:var(--text-faint);
  display:flex; gap:10px; flex-wrap:wrap; align-items:center; margin-bottom:32px;
  padding-bottom:24px; border-bottom:1px solid var(--line);
}
.post-meta .date{ color:var(--text-muted); }
.post-meta a:hover{ color:var(--accent); }
.post-body{ font-size:16px; color:#dbd8d3; }
.post-body p{ margin:0 0 18px; }
.post-body h2,.post-body h3,.post-body h4{ font-family:var(--mono); color:var(--text); margin:32px 0 14px; line-height:1.4; }
.post-body h2{ font-size:20px; } .post-body h3{ font-size:17px; } .post-body h4{ font-size:15px; }
.post-body ul{ margin:0 0 18px; padding-left:22px; }
.post-body li{ margin-bottom:6px; }
.post-body blockquote{
  margin:0 0 18px; padding:2px 0 2px 16px; border-left:2px solid var(--accent);
  color:var(--text-muted); font-style:italic;
}
.post-body code{
  font-family:var(--mono); font-size:0.87em; background:var(--bg-raised);
  padding:2px 6px; border-radius:3px; color:var(--accent);
}
.post-body pre{
  background:var(--bg-raised); border:1px solid var(--line); border-radius:5px;
  padding:16px; overflow-x:auto; margin:0 0 18px;
}
.post-body pre code{ background:none; padding:0; color:#dbd8d3; }
.post-body a{ color:var(--accent); border-bottom:1px solid rgba(230,162,60,0.35); }
.post-body hr{ border:none; border-top:1px solid var(--line); margin:36px 0; }
.post-body img{ max-width:100%; border-radius:5px; display:block; margin:0 0 18px; }
.post-body input[type=checkbox]{ margin-right:8px; accent-color:var(--accent); }
.post-body table{ width:100%; border-collapse:collapse; margin:0 0 24px; font-size:14.5px; display:block; overflow-x:auto; }
.post-body th, .post-body td{ border:1px solid var(--line); padding:8px 12px; text-align:left; }
.post-body th{ font-family:var(--mono); color:var(--text-muted); font-size:11.5px; text-transform:uppercase; letter-spacing:0.03em; background:var(--bg-raised); }

/* syntax highlighting (highlight.js token classes) */
.hljs{ background:transparent; color:#dbd8d3; }
.hljs-comment, .hljs-quote{ color:var(--text-faint); font-style:italic; }
.hljs-keyword, .hljs-selector-tag, .hljs-literal, .hljs-type, .hljs-doctag{ color:var(--accent); }
.hljs-string, .hljs-attr, .hljs-regexp, .hljs-addition{ color:#a8c583; }
.hljs-number, .hljs-symbol{ color:#d19a66; }
.hljs-title, .hljs-title.function_, .hljs-section{ color:#7fb4ca; }
.hljs-built_in, .hljs-class .hljs-title{ color:var(--accent); }
.hljs-variable, .hljs-template-variable, .hljs-params, .hljs-name{ color:#dbd8d3; }
.hljs-meta{ color:var(--text-muted); }
.hljs-deletion{ background:rgba(193,85,74,0.15); }
.hljs-emphasis{ font-style:italic; }
.hljs-strong{ font-weight:600; }
.post-actions{ display:flex; gap:10px; margin-top:40px; padding-top:24px; border-top:1px solid var(--line); }

.panel{ max-width:480px; margin:40px auto 0; }
.panel-narrow{ max-width:420px; margin:60px auto; }
.field-label{ font-family:var(--mono); font-size:11.5px; color:var(--text-muted); display:block; margin-bottom:6px; }
.field{ margin-bottom:18px; }
input[type=text], input[type=password], textarea{
  width:100%; background:var(--bg-raised); border:1px solid var(--line); color:var(--text);
  font-family:var(--sans); font-size:14.5px; padding:11px 13px; border-radius:4px;
}
input[type=text]:focus, input[type=password]:focus, textarea:focus{ border-color:var(--accent); }
textarea{ font-family:var(--mono); font-size:13.5px; min-height:280px; resize:vertical; line-height:1.6; }
.hint{ font-family:var(--mono); font-size:11px; color:var(--text-faint); margin-top:6px; }
.form-row{ display:flex; gap:10px; margin-top:24px; flex-wrap:wrap; align-items:center; }
.form-title{ font-family:var(--mono); font-size:14px; color:var(--text); margin-bottom:24px; }
.form-title .prompt{ color:var(--accent); }
.error-msg{ color:var(--danger); font-family:var(--mono); font-size:12.5px; margin-top:10px; }

footer{
  max-width:var(--maxw); margin:60px auto 0; padding:24px 20px;
  border-top:1px solid var(--line); font-family:var(--mono); font-size:11px;
  color:var(--text-faint); text-align:center;
}

@media (max-width:520px){
  #app{ padding:0 16px 60px; }
  .site-header{ padding:22px 0 16px; margin-bottom:26px; }
  .brand-name{ font-size:15px; }
  .entry-title{ font-size:16px; }
}