:root{
  --bg: #000;
  --stroke: #8a8a8a;
  --fill: #ffffff;
  --site-scale: 0.9; /* desktop default scale (90%) */
}

/* Firefox/Tor: render looks darker → brighten for readability */
@supports (-moz-appearance: none) {
  :root{
    --stroke: #d0d0d0;
  }

  /* Subtle halo to mimic the "outlined" look and improve contrast */
  .doc,
  .doc-quote,
  .downloads-header,
  .github-row,
  .comments{
    text-shadow: 0 0 0.6px rgba(255,255,255,0.22);
  }
}

/* If user/system requests higher contrast */
@media (prefers-contrast: more) {
  :root{
    --stroke: #d0d0d0;
  }
}
[hidden]{ display:none !important; }

html{
  scrollbar-gutter: stable;
}

html.scroll-locked,
body.scroll-locked{
  overflow:hidden;
}
html,body{
  height:100%;
  margin:0;
  background:var(--bg);
  font-family: "Courier New", Courier, monospace;
  zoom: var(--site-scale);
}
.center{
  padding-top:20px;
  display:flex;
  justify-content:center;
  align-items:flex-start;
}
.ascii{
  font-size:8px;
  line-height:1.2;
  /* Fallback for Firefox/Tor: keep visible text */
  color:var(--stroke);
  transition: color .22s ease-out, -webkit-text-stroke .2s ease-out, background .25s ease;
  cursor:pointer;
  display:inline-block;
  padding:15px;
  border-radius:10px;
  margin-bottom:6px;
  user-select:none;
  text-align:center;
  will-change:color,background;
}

/* Chrome/Safari: use outline look */
@supports (-webkit-text-stroke: 1px #000) {
  .ascii{
    color:transparent;
    -webkit-text-stroke:0.6px var(--stroke);
  }
}

/* Hero wrapper and info bar */
.hero{
  display:flex;
  flex-direction:column;
  align-items:center;
}

/* Quote under the logo */
.hero-quote{display:none}

/* Kepler image under logo */
.kepler-image{
  display:block;
  width:480px;
  max-width:80vw;
  height:auto;
  aspect-ratio: 1 / 1;
  margin:24px auto 6px auto;
  opacity:0.98;
}

/* Quote placed inside document */
.doc-quote{
  color:var(--stroke);
  font-family: "Courier New", monospace;
  margin:6px 0 12px 0;
  padding:6px 8px;
  font-size:clamp(11px, 1.9vw, 13px);
  line-height:1.35;
}
.doc-quote footer{
  display:block;
  margin-top:6px;
  text-align:right;
  font-size:clamp(10px, 1.6vw, 12px);
  color:var(--stroke);
}

/* Readable documentation area below logo */
.doc{
  width:100%;
  max-width:900px;
  color:var(--stroke);
  font-family: "Courier New", "Lucida Console", Monaco, monospace;
  /* ещё мельче для пиксельного вида */
  font-size:clamp(10px, 1.6vw, 12px);
  line-height:1.38;
  padding:12px 14px;
  /* document vertical offset (raised additional 30px) */
  margin-top:20px;
  box-sizing:border-box;
  text-align:left;
  font-weight:400;
  -webkit-font-smoothing: none;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeSpeed;
  letter-spacing:0.5px;
}

/* Comments section wrapper */
.comments-section-wrapper{
  max-width:900px;
  margin:0 auto;
}

.comments-info.doc{
  margin-top:32px;
  margin-bottom:0;
}

.doc h1{
  font-size:clamp(14px, 3.2vw, 16px);
  margin:0 0 6px 0;
  color:var(--stroke);
  font-weight:400;
  letter-spacing:0.6px;
}
.doc h2{
  font-size:clamp(12px, 2.4vw, 14px);
  margin:10px 0 6px 0;
  color:var(--stroke);
  font-weight:400;
}
.doc p{margin:0 0 10px 0}
.doc ul, .doc ol{margin:0 0 12px 1.1rem}

.doc hr{
  border:0;
  height:1px;
  background:var(--stroke);
  opacity:0.95;
  margin:12px 0;
}

/* Image between logo and document */
.hero-image{
  display:block;
  width:100%;
  max-width:640px;
  height:auto;
  margin:6px 0;
  border-radius:6px;
  box-shadow:0 8px 24px rgba(0,0,0,0.55);
  object-fit:contain;
}

/* Downloads row: file icons with captions */
.downloads{
  display:flex;
  gap:18px;
  justify-content:center;
  align-items:flex-start;
  width:100%;
  max-width:900px;
  margin:18px auto 30px auto;
  box-sizing:border-box;
}
.download-item{ text-decoration:none; color:inherit; flex:0 0 140px; display:flex; justify-content:center }
.download-item figure{ display:flex; flex-direction:column; align-items:center; margin:0 }
.download-item img{ width:88px; height:88px; object-fit:contain; border-radius:8px; background:rgba(255,255,255,0.02); padding:8px }
.download-item figure{ display:flex; flex-direction:column; align-items:center; margin:0; transition: transform .18s ease }
.download-item img{ width:88px; height:88px; object-fit:contain; border-radius:8px; background:rgba(255,255,255,0.02); padding:8px; display:block }
.download-item figcaption{ 
  margin-top:8px; 
  color:var(--stroke); 
  font-family: "Courier New", "Lucida Console", Monaco, monospace; 
  font-size:clamp(10px, 1.6vw, 12px); 
  text-align:center; 
  max-width:140px; 
  overflow-wrap:break-word;
  -webkit-font-smoothing: none;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeSpeed;
  letter-spacing:0.5px;
  line-height:1.38;
}
.download-item:hover figure,
.download-item:focus-within figure,
.download-item:active figure{ transform:translateY(-6px) }

/* Direct view .txt buttons (reuse download-item layout) */
.text-viewers-header{
  margin-top:-10px;
}
.text-viewers{
  display:flex;
  gap:18px;
  justify-content:center;
  align-items:flex-start;
  width:100%;
  max-width:900px;
  margin:-6px auto 30px auto;
  box-sizing:border-box;
}
.text-viewer-btn{
  background:none;
  border:none;
  padding:0;
  cursor:pointer;
  appearance:none;
  -webkit-appearance:none;
}
.text-viewer-btn:focus{
  outline:none;
}

/* Text viewer modal - completely isolated from main content */
.text-viewer-modal{
  position:fixed;
  inset:0;
  z-index:10000;
  display:flex;
  align-items:center;
  justify-content:center;
  pointer-events:none;
}
.text-viewer-modal[hidden]{
  display:none;
}
.text-viewer-backdrop{
  position:absolute;
  inset:0;
  background:#000;
  overscroll-behavior: none;
  pointer-events:auto;
}
.text-viewer-panel{
  pointer-events:auto;
}
.text-viewer-panel{
  position:relative;
  width:min(900px, 92vw);
  max-height:86vh;
  background:var(--bg);
  border:1px solid rgba(255,255,255,0.10);
  border-radius:10px;
  padding:42px 18px 16px 18px;
  box-sizing:border-box;
  overflow:hidden;
}
.text-viewer-close{
  position:absolute;
  top:10px;
  right:10px;
  width:32px;
  height:32px;
  border-radius:6px;
  background:rgba(255,255,255,0.05);
  border:1px solid rgba(255,255,255,0.10);
  color:var(--stroke);
  font-family:"Courier New", monospace;
  font-size:20px;
  line-height:1;
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:center;
}
.text-viewer-close:hover{
  background:rgba(255,255,255,0.10);
  border-color:rgba(255,255,255,0.18);
}
.text-viewer-close:focus,
.text-viewer-close:focus-visible{
  outline:2px solid #444;
  outline-offset:2px;
  box-shadow:none;
}
.text-viewer-pre{
  margin:0;
  color:var(--stroke);
  font-family: "Courier New", "Lucida Console", Monaco, monospace;
  font-size:clamp(10px, 1.6vw, 12px);
  line-height:1.38;
  letter-spacing:0.5px;
  white-space:pre-wrap;
  word-break:break-word;
  overflow:auto;
  max-height:calc(86vh - 58px);
  -webkit-overflow-scrolling: touch;
  -webkit-font-smoothing: none;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeSpeed;
}
.text-viewer-pre::-webkit-scrollbar{ width:8px }
.text-viewer-pre::-webkit-scrollbar-track{ background:rgba(255,255,255,0.02) }
.text-viewer-pre::-webkit-scrollbar-thumb{ background:rgba(255,255,255,0.10); border-radius:4px }
.text-viewer-pre::-webkit-scrollbar-thumb:hover{ background:rgba(255,255,255,0.14) }


@media (max-width:520px){
  .center{padding-top:12px}
  .doc{padding:10px 12px; font-size:12px; margin-top:28px}
  .hero-image{max-width:92%; margin:6px 0}
  .downloads{flex-wrap:wrap; gap:12px; justify-content:space-around}
  .download-item{ flex:0 0 45%; max-width:46%; margin-bottom:12px }
  .download-item img{ width:96px; height:96px }
  .download-item figcaption{ font-size:11px }
  .text-viewers{flex-wrap:wrap; gap:12px; justify-content:space-around}
  .text-viewers-header{ margin-top:-6px }
  .text-viewer-btn{ flex:0 0 45%; max-width:46%; margin-bottom:12px }
  .text-viewer-modal{ padding:12px; box-sizing:border-box; }
  .text-viewer-panel{
    width:100%;
    max-height:calc(100dvh - 24px);
    padding:44px 12px 12px 12px;
    border-radius:12px;
  }
  .text-viewer-pre{
    max-height:calc(100dvh - 24px - 62px);
    font-size:11px;
    /* Mobile: keep txt formatting "as-is" (no forced wrapping) */
    white-space: pre;
    word-break: normal;
    overflow-wrap: normal;
    overflow-x: auto;
    overflow-y: auto;
  }
  .text-viewer-close{ top:10px; right:10px; width:30px; height:30px; font-size:18px }
}


/* keep hero wrapper minimal */
.hero .ascii{
  transition: background .25s ease, color .25s ease, -webkit-text-stroke .2s ease;
}

/* Downloads header */
.downloads-header{ 
  text-align:center; 
  color:var(--stroke); 
  margin:24px auto 12px auto; 
  max-width:900px;
  padding:0 14px;
  font-family: "Courier New", "Lucida Console", Monaco, monospace;
  -webkit-font-smoothing: none;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeSpeed;
}
.downloads-header h3{ 
  margin:0 0 6px 0; 
  font-family: "Courier New", "Lucida Console", Monaco, monospace; 
  font-size:clamp(12px, 2.4vw, 14px);
  letter-spacing:0.5px;
  font-weight:400;
  -webkit-font-smoothing: none;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeSpeed;
  text-align:center;
}
.downloads-header .downloads-sub{ 
  margin:0; 
  font-size:clamp(10px, 1.6vw, 12px); 
  color:var(--stroke); 
  opacity:0.9; 
  font-family: "Courier New", "Lucida Console", Monaco, monospace; 
  -webkit-font-smoothing: none;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeSpeed;
  letter-spacing:0.5px;
  line-height:1.38;
  text-align:center;
  padding-left:0;
}

/* GitHub row under downloads */
.github-row{ 
  display:flex; 
  flex-direction:column; 
  align-items:flex-start; 
  gap:10px; 
  margin:14px auto 28px auto; 
  max-width:900px;
  padding:0 14px;
  font-family: "Courier New", "Lucida Console", Monaco, monospace;
  -webkit-font-smoothing: none;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeSpeed;
}
.github-link-container{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:6px;
  width:100%;
  margin-top:8px;
}
.github-link{ 
  color:var(--stroke); 
  text-decoration:none; 
  font-family: "Courier New", "Lucida Console", Monaco, monospace; 
  font-size:clamp(10px, 1.6vw, 12px);
  letter-spacing:0.5px;
  line-height:1.38;
  -webkit-font-smoothing: none;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeSpeed;
  text-align:center;
  display:block;
  margin:clamp(60px, 8vh, 96px) 0 0 0;
}
.github-link:hover{ text-decoration:underline }

.project-links{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:4px;
  margin-top:10px;
  width:100%;
  max-width:900px;
  padding:0 14px;
  box-sizing:border-box;
}
.project-link{
  color:var(--stroke);
  text-decoration:none;
  font-family: "Courier New", "Lucida Console", Monaco, monospace;
  font-size:clamp(10px, 1.6vw, 12px);
  letter-spacing:0.5px;
  line-height:1.38;
  text-align:center;
  display:block;
  opacity:0.96;
  max-width:100%;
  overflow-wrap:anywhere;
  word-break:break-word;
}
.project-link:hover{
  text-decoration:underline;
  opacity:1;
}

/* Prevent long URLs from causing horizontal overflow */
.github-link,
.wallet-address{
  overflow-wrap:anywhere;
  word-break:break-word;
}

/* ASCII <pre> can overflow on small screens */
.ascii{
  max-width:100%;
  overflow-x:auto;
}

.github-link-with-wallet{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:8px;
  width:100%;
}

.support-note{
  margin:0;
  max-width:900px;
  color:var(--stroke);
  font-family: "Courier New", "Lucida Console", Monaco, monospace;
  font-size:clamp(10px, 1.6vw, 12px);
  line-height:1.38;
  letter-spacing:0.5px;
  text-align:left;
  opacity:0.92;
}
.support-note p{
  margin:0 0 10px 0;
}
.support-note p:last-child{
  margin-bottom:0;
}
.support-problem{
  margin:0 0 10px 0;
  max-width:900px;
  color:var(--stroke);
  font-family: "Courier New", "Lucida Console", Monaco, monospace;
  font-size:clamp(10px, 1.6vw, 12px);
  line-height:1.38;
  letter-spacing:0.5px;
  text-align:center;
  opacity:0.92;
}
.support-note + .support-note{
  margin-top:12px;
}
.support-note .support-list{
  margin:6px 0 10px 1.1rem;
  padding:0;
}
.support-note .support-list li{
  margin:2px 0;
}

.wallet-info{
  display:flex;
  align-items:center;
  gap:8px;
  margin-top:12px;
}

.bitcoin-icon{
  width:24px;
  height:24px;
  object-fit:contain;
  flex-shrink:0;
}

.wallet-details{
  display:flex;
  flex-direction:column;
  gap:2px;
  align-items:flex-start;
}

.wallet-username{
  color:var(--stroke);
  font-family: "Courier New", "Lucida Console", Monaco, monospace;
  font-size:clamp(10px, 1.6vw, 12px);
  letter-spacing:0.5px;
  line-height:1.38;
  -webkit-font-smoothing: none;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeSpeed;
}

.wallet-address{
  color:var(--stroke);
  font-family: "Courier New", "Lucida Console", Monaco, monospace;
  font-size:clamp(9px, 1.4vw, 11px);
  letter-spacing:0.5px;
  line-height:1.38;
  -webkit-font-smoothing: none;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeSpeed;
  opacity:0.85;
}

.github-image{ 
  display:flex;
  justify-content:center;
  width:100%;
  /* extra breathing room (~6 lines) */
  margin-top:clamp(36px, 6vh, 84px);
}
.github-image img{
  width:clamp(240px, 45vw, 360px);
  max-width:90vw;
  height:auto;
  aspect-ratio: 1 / 1;
  display:block;
}

.github-note{
  max-width:900px;
  color:var(--stroke);
  font-family: "Courier New", "Lucida Console", Monaco, monospace;
  font-size:clamp(10px, 1.6vw, 12px);
  line-height:1.38;
  text-align:left;
  margin:0;
  padding:0;
  letter-spacing:0.5px;
  -webkit-font-smoothing: none;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeSpeed;
}

.dev-note{
  max-width:900px;
  color:var(--stroke);
  font-family: "Courier New", "Lucida Console", Monaco, monospace;
  font-size:clamp(10px, 1.6vw, 12px);
  line-height:1.38;
  text-align:left;
  margin:0;
  padding:0;
  letter-spacing:0.5px;
  font-style:normal;
  -webkit-font-smoothing: none;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeSpeed;
}

.opensource-note{
  max-width:900px;
  color:var(--stroke);
  font-family: "Courier New", "Lucida Console", Monaco, monospace;
  font-size:clamp(10px, 1.6vw, 12px);
  line-height:1.38;
  text-align:left;
  margin:0;
  padding:0;
  letter-spacing:0.5px;
  -webkit-font-smoothing: none;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeSpeed;
}

.dev-note a{
  color:var(--stroke);
  font-family: "Courier New", "Lucida Console", Monaco, monospace;
  text-decoration:none;
  opacity:0.98;
}

.dev-note a:hover,
.dev-note a:focus,
.dev-note a:focus-visible{
  opacity:1;
  text-decoration:underline;
}

@media (max-width:520px){
  .github-note, .dev-note, .opensource-note{ font-size:clamp(9px, 1.4vw, 11px); padding:0 12px }
}

/* Login button styling */
.login-container{
  position:fixed;
  right:300px;
  top:50px;
  transform:none;
  z-index:1000;
}

/* Fixed header with buttons */
.header-fixed{
  position:fixed;
  top:50px;
  right:300px;
  display:flex;
  gap:150px;
  z-index:99999;
}

.login-btn{
  background:transparent;
  border:none;
  color:var(--stroke);
  font-family: "Courier New", monospace;
  font-size:clamp(12px, 1.5vw, 15px);
  font-weight:400;
  letter-spacing:2px;
  cursor:pointer;
  padding:8px 0;
  position:relative;
  -webkit-font-smoothing: none;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeSpeed;
  transition: color 0.3s ease;
  user-select:none;
}

/* Underline effect on hover */
.login-btn::after{
  content:'';
  position:absolute;
  bottom:-8px;
  left:0;
  width:0;
  height:2px;
  background:var(--stroke);
  transition:width 0.4s ease;
}

.login-btn:hover::after,
.login-btn:focus::after{
  width:100%;
}

.login-btn:hover,
.login-btn:focus{
  outline:none;
  color:var(--fill);
}

/* Discussions button styling */
.discussions-container{
  position:fixed;
  right:450px;
  top:50px;
  transform:none;
  z-index:1000;
}

.discussions-btn{
  background:transparent;
  border:none;
  color:var(--stroke);
  font-family: "Courier New", monospace;
  font-size:clamp(12px, 1.5vw, 15px);
  font-weight:400;
  letter-spacing:2px;
  cursor:pointer;
  padding:8px 0;
  position:relative;
  -webkit-font-smoothing: none;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeSpeed;
  transition: color 0.3s ease;
  user-select:none;
}

/* Underline effect on hover */
.discussions-btn::after{
  content:'';
  position:absolute;
  bottom:-8px;
  left:0;
  width:0;
  height:2px;
  background:var(--stroke);
  transition:width 0.4s ease;
}

.discussions-btn:hover::after,
.discussions-btn:focus::after{
  width:100%;
}

.discussions-btn:hover,
.discussions-btn:focus{
  outline:none;
  color:var(--fill);
}

/* New fixed header - single element for both buttons */
.header-fixed{
  position:fixed;
  top:50px;
  right:300px;
  display:flex;
  gap:150px;
  z-index:99999;
  margin:0;
  padding:0;
}

@media (max-width:1200px){
  .login-container{
    position:static;
    transform:none;
    margin-bottom:20px;
  }
}

/* Reset zoom on narrower viewports for readability */
@media (max-width:1199px){
  html,body{ zoom: 1; }
}

/* Comments / Discussion layout and mobile fixes */
.comments{
  width:100%;
  max-width:900px;
  margin:18px auto 48px;
  padding:0 14px;
  box-sizing:border-box;
}
.comments .comment-form{ display:block }
.comment-form textarea{
  width:100%;
  min-height:84px;
  max-width:100%;
  box-sizing:border-box;
  padding:12px;
  background: rgba(0,0,0,0.55);
  color:var(--fill);
  border:1px solid rgba(255,255,255,0.06);
  border-radius:6px;
  font-family: "Courier New", monospace;
  font-size:14px;
  line-height:1.4;
  resize:vertical;
  position:relative;
  z-index:10;
}
/* dark gray focus outlines to replace browser default (orange on some platforms) */
.comment-form textarea:focus,
.comment-form textarea:focus-visible{
  outline: 2px solid #444; /* dark gray */
  outline-offset: 2px;
  box-shadow: none;
}
.comment-controls button:focus,
.comment-controls button:focus-visible,
.ascii:focus,
.ascii:focus-visible{
  outline:none;
  border:none;
}
.comment-controls{
  display:flex;
  gap:12px;
  align-items:center;
  margin-top:8px;
  flex-wrap:wrap;
}
.file-label{
  display:inline-block;
  background:transparent;
  color:var(--stroke);
  border:1px solid rgba(255,255,255,0.06);
  padding:6px 8px;
  border-radius:4px;
  cursor:pointer;
}
.comment-controls button{
  padding:6px 10px;
  border-radius:4px;
  border:1px solid rgba(255,255,255,0.06);
  background:rgba(255,255,255,0.02);
  color:var(--stroke);
  cursor:pointer;
}
.comment-hint{
  font-size:12px;
  color:var(--stroke);
  margin-top:8px;
  opacity:0.9;
}

@media (max-width:520px){
  .comments{ padding:0 10px; margin:14px auto 38px; max-width:100%; box-sizing:border-box; }
  .comment-form textarea{ min-height:96px; font-size:13px; width:100%; max-width:100%; box-sizing:border-box; }
  .comment-controls{ gap:8px; flex-wrap:wrap; }
  .file-label, .comment-controls button{ padding:6px 8px; font-size:13px }
  .comments-section-wrapper{ max-width:100%; padding:0 10px; box-sizing:border-box; }
  .comments-info.doc{ padding:10px 0; max-width:100%; box-sizing:border-box; }
  .comment{ padding:10px 0; max-width:100%; box-sizing:border-box; word-wrap:break-word; overflow-wrap:break-word; }
  .comment .text{ word-wrap:break-word; overflow-wrap:break-word; max-width:100%; }
  .comment-image-container{ max-width:100%; box-sizing:border-box; }
  .comment-image-container img.comment-image{ max-width:100%; height:auto; }
  .replies-container{ max-width:100%; box-sizing:border-box; }
}

/* Comments UI */
.comments{
  max-width:900px;
  margin:24px auto;
  background:transparent;
  padding:12px 14px;
  border-radius:0;
  color:var(--stroke);
  box-shadow:none;
  font-family: "Courier New", "Lucida Console", Monaco, monospace;
  font-size:clamp(10px, 1.6vw, 12px);
  line-height:1.38;
  text-align:left;
  font-weight:400;
  -webkit-font-smoothing: none;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeSpeed;
  letter-spacing:0.5px;
}
.comments h2{ 
  margin:0 0 8px 0; 
  font-size:clamp(12px, 2.4vw, 14px);
  color:var(--stroke);
  font-weight:400;
  font-family: "Courier New", "Lucida Console", Monaco, monospace;
  -webkit-font-smoothing: none;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeSpeed;
}
.comments h3{ 
  margin:0 0 8px 0; 
  font-size:clamp(12px, 2.4vw, 14px);
  color:var(--stroke);
  font-weight:400;
  font-family: "Courier New", "Lucida Console", Monaco, monospace;
  -webkit-font-smoothing: none;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeSpeed;
}
.comment-form textarea{
  width:100%;
  min-height:72px;
  background:rgba(255,255,255,0.04);
  color:var(--stroke);
  border:1px solid rgba(255,255,255,0.1);
  padding:8px;
  border-radius:0;
  resize:vertical;
  font-family: "Courier New", "Lucida Console", Monaco, monospace;
  font-size:clamp(10px, 1.6vw, 12px);
  -webkit-font-smoothing: none;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeSpeed;
  letter-spacing:0.5px;
}
.image-preview{
  position:relative;
  margin-top:8px;
  margin-bottom:8px;
  display:inline-block;
}
.image-preview img{
  max-width:200px;
  max-height:200px;
  width:auto;
  height:auto;
  border-radius:0;
  border:1px solid rgba(255,255,255,0.1);
  display:block;
}
.remove-image-btn{
  position:absolute;
  top:-8px;
  right:-8px;
  background:rgba(0,0,0,0.9);
  border:1px solid rgba(255,255,255,0.2);
  color:#f88;
  width:24px;
  height:24px;
  border-radius:0;
  cursor:pointer;
  font-size:14px;
  display:flex;
  align-items:center;
  justify-content:center;
  transition:all 0.2s;
  font-family: "Courier New", "Lucida Console", Monaco, monospace;
}
.remove-image-btn:hover{
  background:rgba(255,0,0,0.3);
  border-color:#f88;
}
.comment-controls{ display:flex; gap:8px; align-items:center; margin-top:8px; flex-wrap:wrap; }
.cf-turnstile{
  margin: 8px 0;
}
.file-label{ 
  cursor:pointer; 
  font-size:clamp(10px, 1.6vw, 12px); 
  color:var(--stroke); 
  background:rgba(255,255,255,0.02); 
  padding:6px 8px; 
  border-radius:0; 
  border:1px solid rgba(255,255,255,0.1);
  font-family: "Courier New", "Lucida Console", Monaco, monospace;
  -webkit-font-smoothing: none;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeSpeed;
  letter-spacing:0.5px;
}
.file-label input[type=file]{ display:none; }
.comment-controls button{
  cursor:pointer;
  font-size:clamp(10px, 1.6vw, 12px);
  color:var(--stroke);
  background:rgba(255,255,255,0.02);
  border:1px solid rgba(255,255,255,0.1);
  padding:6px 12px;
  border-radius:0;
  font-family: "Courier New", "Lucida Console", Monaco, monospace;
  -webkit-font-smoothing: none;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeSpeed;
  letter-spacing:0.5px;
  transition:background 0.2s;
}
.comment-controls button:hover{
  background:rgba(255,255,255,0.05);
}
.comment-hint{ font-size:0.8rem; color:#ccc; margin-top:8px; }
.comments-list{ margin-top:12px; display:flex; flex-direction:column; gap:10px; }
.comment{ 
  background: transparent; 
  padding:10px 0; 
  border-radius:0; 
  border-bottom:1px solid rgba(255,255,255,0.1);
  display:flex;
  flex-direction:column; /* stack content + replies vertically */
  gap:10px;
  align-items:stretch;
}
.comment:last-child{
  border-bottom:none;
}
.comment .content{ width:100%; }
.comment-header{ display:flex; align-items:center; gap:8px; margin-bottom:6px; }
.comment-avatar{ width:32px; height:32px; border-radius:50%; object-fit:cover; border:1px solid rgba(255,255,255,0.1); }
.comment-nickname{ 
  font-weight:400; 
  color:var(--stroke); 
  font-size:clamp(10px, 1.6vw, 12px);
  font-family: "Courier New", "Lucida Console", Monaco, monospace;
  -webkit-font-smoothing: none;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeSpeed;
  letter-spacing:0.5px;
}
.comment .meta{ 
  font-size:clamp(9px, 1.4vw, 11px); 
  color:var(--stroke); 
  opacity:0.7;
  margin-bottom:6px;
  font-family: "Courier New", "Lucida Console", Monaco, monospace;
  -webkit-font-smoothing: none;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeSpeed;
  letter-spacing:0.5px;
}
.comment-image-container{ 
  margin-top:10px; 
  display:inline-block;
  max-width:100%;
}
.comment-image-container img.comment-image{ 
  max-width:300px; 
  max-height:300px; 
  width:auto; 
  height:auto; 
  object-fit:contain; 
  border-radius:0; 
  display:block;
  border:1px solid rgba(255,255,255,0.1);
  background:rgba(0,0,0,0.2);
  cursor: zoom-in;
}
.image-error{
  display:block;
  margin-top:6px;
  color:#888;
  font-size:0.85rem;
  font-family: "Courier New", "Lucida Console", Monaco, monospace;
  -webkit-font-smoothing: none;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeSpeed;
  letter-spacing:0.5px;
}
.comment .text{ 
  white-space:pre-wrap; 
  color:var(--stroke);
  font-family: "Courier New", "Lucida Console", Monaco, monospace;
  font-size:clamp(10px, 1.6vw, 12px);
  line-height:1.38;
  -webkit-font-smoothing: none;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeSpeed;
  letter-spacing:0.5px;
}
.comments-pagination{ display:flex; justify-content:center; align-items:center; gap:8px; margin-top:20px; flex-wrap:wrap; }
.pagination-btn{ 
  background:rgba(255,255,255,0.02); 
  border:1px solid rgba(255,255,255,0.1); 
  color:var(--stroke); 
  padding:6px 12px; 
  border-radius:0; 
  cursor:pointer; 
  font-size:clamp(10px, 1.6vw, 12px);
  transition:all 0.2s;
  font-family: "Courier New", "Lucida Console", Monaco, monospace;
  -webkit-font-smoothing: none;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeSpeed;
  letter-spacing:0.5px;
}
.pagination-btn:hover:not(:disabled){ background:rgba(255,255,255,0.05); border-color:rgba(255,255,255,0.2); }
.pagination-btn:disabled{ opacity:0.4; cursor:not-allowed; }
.pagination-btn.active{ background:rgba(255,255,255,0.08); border-color:rgba(255,255,255,0.3); font-weight:400; }
.pagination-dots{ color:var(--stroke); opacity:0.7; padding:0 4px; }

/* Image lightbox (click to enlarge) */
.image-lightbox{
  position:fixed;
  inset:0;
  background:rgba(0,0,0,0.86);
  display:flex;
  align-items:center;
  justify-content:center;
  padding:16px;
  z-index:100000;
}
.image-lightbox[hidden]{ display:none; }
.image-lightbox-content{
  position:relative;
  max-width:92vw;
  max-height:85vh;
  border:1px solid rgba(255,255,255,0.12);
  background:rgba(0,0,0,0.35);
  padding:10px;
  box-sizing:border-box;
}
.image-lightbox-img{
  display:block;
  max-width:92vw;
  max-height:85vh;
  width:auto;
  height:auto;
  object-fit:contain;
}
.image-lightbox-close{
  position:absolute;
  top:8px;
  right:8px;
  width:32px;
  height:32px;
  display:flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  color:var(--stroke);
  background:rgba(0,0,0,0.75);
  border:1px solid rgba(255,255,255,0.15);
  border-radius:0;
  font-family: "Courier New", "Lucida Console", Monaco, monospace;
  font-size:18px;
  line-height:1;
}
.image-lightbox-close:hover{
  background:rgba(255,255,255,0.06);
}
.image-lightbox-close:focus,
.image-lightbox-close:focus-visible{
  outline: 2px solid #444; /* dark gray */
  outline-offset: 2px;
  box-shadow: none;
}

@media (max-width:640px){
  .image-lightbox{ padding:10px; }
  .image-lightbox-content{ max-width:96vw; max-height:86vh; padding:8px; }
  .image-lightbox-img{ max-width:96vw; max-height:86vh; }
  .image-lightbox-close{ width:38px; height:38px; font-size:20px; }
}

/* Reply button and nested comments */
.reply-btn{
  margin-top:8px;
  cursor:pointer;
  font-size:clamp(9px, 1.4vw, 11px);
  color:var(--stroke);
  background:rgba(255,255,255,0.02);
  border:1px solid rgba(255,255,255,0.1);
  padding:4px 8px;
  border-radius:0;
  font-family: "Courier New", "Lucida Console", Monaco, monospace;
  -webkit-font-smoothing: none;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeSpeed;
  letter-spacing:0.5px;
  transition:background 0.2s;
}
.reply-btn:hover{
  background:rgba(255,255,255,0.05);
}

/* Toggle replies button */
.reply-toggle-btn{
  margin-top:8px;
  cursor:pointer;
  font-size:clamp(9px, 1.4vw, 11px);
  color:var(--stroke);
  background:rgba(255,255,255,0.02);
  border:1px solid rgba(255,255,255,0.1);
  padding:4px 8px;
  border-radius:0;
  font-family: "Courier New", "Lucida Console", Monaco, monospace;
  -webkit-font-smoothing: none;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeSpeed;
  letter-spacing:0.5px;
  transition:background 0.2s;
}
.reply-toggle-btn:hover{
  background:rgba(255,255,255,0.05);
}

/* Replies container */
.replies-container{
  margin-top:12px;
  margin-left:32px;
  padding-left:16px;
  border-left:1px solid rgba(255,255,255,0.1);
  display:flex;
  flex-direction:column;
  gap:8px;
  box-sizing:border-box;
  align-items:stretch;
}

.comment.reply{
  margin-top:0;
  padding-top:0;
  border-top:none;
  margin-left:0;
  padding-left:0;
  border-bottom:1px solid rgba(255,255,255,0.08);
}
.replies-container .comment.reply:last-of-type{
  border-bottom:none;
}

.reply-toggle-btn{
  align-self:flex-start; /* don't stretch full width in flex column */
}

/* Reply form */
.reply-form{
  margin-top:12px;
  padding:12px;
  background:rgba(255,255,255,0.02);
  border:1px solid rgba(255,255,255,0.1);
}

.reply-textarea{
  width:100%;
  min-height:60px;
  background:rgba(255,255,255,0.04);
  color:var(--stroke);
  border:1px solid rgba(255,255,255,0.1);
  padding:8px;
  border-radius:0;
  resize:vertical;
  font-family: "Courier New", "Lucida Console", Monaco, monospace;
  font-size:clamp(10px, 1.6vw, 12px);
  -webkit-font-smoothing: none;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeSpeed;
  letter-spacing:0.5px;
  box-sizing:border-box;
}

/* Dark gray focus outline for reply textarea */
.reply-textarea:focus,
.reply-textarea:focus-visible{
  outline: 2px solid #444; /* dark gray */
  outline-offset: 2px;
  box-shadow: none;
  border-color: rgba(255,255,255,0.15);
}

.reply-controls{
  display:flex;
  gap:8px;
  align-items:center;
  margin-top:8px;
  flex-wrap:wrap;
}

.reply-submit-btn,
.reply-cancel-btn{
  cursor:pointer;
  font-size:clamp(10px, 1.6vw, 12px);
  color:var(--stroke);
  background:rgba(255,255,255,0.02);
  border:1px solid rgba(255,255,255,0.1);
  padding:6px 12px;
  border-radius:0;
  font-family: "Courier New", "Lucida Console", Monaco, monospace;
  -webkit-font-smoothing: none;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeSpeed;
  letter-spacing:0.5px;
  transition:background 0.2s;
}

.reply-submit-btn:hover,
.reply-cancel-btn:hover{
  background:rgba(255,255,255,0.05);
}

@media (max-width:640px){
  .comments{ margin:12px; padding:10px; max-width:100%; box-sizing:border-box; }
  .comment-image-container img.comment-image{ max-width:100%; max-height:200px; width:auto; height:auto; }
  .comment-avatar{ width:28px; height:28px; }
  .pagination-btn{ padding:5px 10px; }
  .image-preview img{ max-width:150px; max-height:150px; }
  .comment{ max-width:100%; box-sizing:border-box; word-wrap:break-word; overflow-wrap:break-word; }
  .comment .text{ word-wrap:break-word; overflow-wrap:break-word; max-width:100%; }
  .replies-container{ max-width:100%; box-sizing:border-box; }
}

/* Decorative outline only for the downloads header title */
.downloads-header h3{
  color: transparent;
  -webkit-text-stroke: 0.6px var(--stroke);
  text-shadow: none;
  -webkit-font-smoothing: none;
  -moz-osx-font-smoothing: grayscale;
  font-weight:400;
  letter-spacing:0.6px;
}

/* Keep captions, notes and links readable (filled color) */
.downloads-header .downloads-sub,
.download-item figcaption,
.github-note,
.dev-note,
.opensource-note,
.github-link{
  color: var(--stroke);
  -webkit-text-stroke: 0;
  text-shadow: none;
  letter-spacing:0.2px;
  opacity:0.95;
}

/* Make bottom links explicit and interactive */
.opensource-note a,
.dev-note a,
.github-link,
.github-link a{
  color: var(--stroke);
  text-decoration:none;
  opacity:0.98;
  font-family: "Courier New", "Lucida Console", Monaco, monospace;
  -webkit-font-smoothing: none;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeSpeed;
}
.opensource-note a:hover,
.dev-note a:hover,
.github-link:hover,
.github-link a:hover{
  text-decoration:underline;
  opacity:1;
}