/* Minimal, fast, responsive; system fonts; auto dark mode */
:root{
  --bg: #0b0d10;
  --fg: #e8eaed;
  --muted:#9aa0a6;
  --card:#121419;
  --accent:#8ab4f8;
  --button: #0062ff;
  --border:#20242c;
  --altborder:#005fb7;
}
@media (prefers-color-scheme: light){
  :root{
    --bg:#ffffff;
    --fg:#1f2328;
    --muted:#57606a;
    --card:#f6f8fa;
    --accent:#2563eb;
    --button: #0062ff;
    --altborder:#6fcfff;
  }
}
*{box-sizing:border-box}
html,body{margin:0;padding:0;min-height:100vh}
body{
  font:16px/1.6 ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial;
  background:var(--bg); color:var(--fg);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}
.wrap{max-width:960px;margin:0 auto;padding:16px}
@media (min-width:768px){.wrap{padding:24px}}
.header{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap}
.brand{display:flex;align-items:center;gap:10px}
.brand .logo{filter:drop-shadow(0 0 8px rgba(0,0,0,.1))}
h1{margin:0;font-size:20px}
@media (min-width:768px){h1{font-size:22px}}
.nav{display:flex;gap:14px;flex-wrap:wrap}
.nav a{color:var(--muted);text-decoration:none}
.nav a:hover{color:var(--fg)}
.hero{padding:32px 0}
@media (min-width:768px){.hero{padding:48px 0}}
.hero h2{font-size:28px;line-height:1.1;margin:0 0 8px}
@media (min-width:480px){.hero h2{font-size:32px}}
@media (min-width:768px){.hero h2{font-size:40px}}
.accent{color:var(--accent)}
.lede{font-size:18px;color:var(--muted);margin-top:12px}
@media (min-width:768px){.lede{font-size:20px}}
.imagedesc{font-size:18px;color:var(--muted);margin-top:1px}
@media (min-width:768px){.imagedesc{font-size:15px}}
.cta-row{display:flex;gap:12px;margin-top:18px;flex-wrap:wrap}
.btn{display:inline-block;padding:10px 14px;border-radius:10px;background:var(--button);color:white;text-decoration:none;font-weight:600;border:none;cursor:pointer;font-size:16px}
.btn.ghost{background:transparent;border:1px solid var(--border);color:var(--fg)}
.card-grid{display:grid;grid-template-columns:1fr;gap:16px;margin:24px 0}
@media (min-width:768px){.card-grid{grid-template-columns:repeat(auto-fit,minmax(260px,1fr))}}
.card{background:var(--card);border:1px solid var(--border);border-radius:14px;padding:18px}
.card h3{margin:0 0 6px}
.card ul{padding-left:18px;margin:8px 0 0}
.text-link{color:var(--accent);text-decoration:none}
.text-link:hover{text-decoration:underline}
.pill-cloud h2{margin:36px 0 8px}
.pills{display:flex;flex-wrap:wrap;gap:8px}
.pills span{padding:6px 10px;border:1px solid var(--border);border-radius:999px;background:transparent}
.contact{margin:36px 0}
.contact a{color:var(--accent);text-decoration:none}
.contact a:hover{text-decoration:underline}
.social{list-style:none;display:flex;gap:12px;padding:0;flex-wrap:wrap}
.footer{border-top:1px solid var(--border);margin-top:36px;text-align:center;color:var(--muted)}
input[type="file"],input[type="number"]{padding:8px;border:1px solid var(--border);border-radius:6px;background:var(--card);color:var(--fg);font-size:16px}
input[type="file"]{width:100%;max-width:400px}
.mono{font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace}
.muted{opacity:.8}
.progress{height:8px;background:#eee;border-radius:999px;overflow:hidden}
.progress>div{height:100%;width:0%;background:#7c4dff;transition:width .2s}
.grid{display:grid;grid-template-columns:1fr;gap:1rem}
@media (min-width:800px){.grid{grid-template-columns:1fr 1fr}}
.spinner{display:inline-block;width:16px;height:16px;border:2px solid var(--border);border-top:2px solid var(--accent);border-radius:50%;animation:spin 1s linear infinite}
@keyframes spin{0%{transform:rotate(0deg)}100%{transform:rotate(360deg)}}
.profile-img{border-radius:20px;border:4px solid var(--altborder);transition:border-color 0.2s ease; max-width: 300px; width: 100%; height: auto;}
.profile-img:hover{border-color:var(--accent)}
.general-img{border-radius:20px;border:4px solid var(--altborder);transition:border-color 0.2s ease; max-width: 800px; width: 100%; height: auto;}
.general-img:hover{border-color:var(--accent)}
.furry-img{border-radius:20px;border:4px solid var(--altborder);transition:border-color 0.2s ease; max-width: 1800px; width: 100%; height: auto;}
.furry-img:hover{border-color:var(--accent)}

/* Visit Counter Styles */
.visit-counter {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin: 24px 0;
  padding: 20px;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 16px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.visit-counter-label {
  font-size: 14px;
  color: var(--muted);
  margin-bottom: 8px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  font-weight: 500;
}

.visit-counter-number {
  font-size: 36px;
  font-weight: 700;
  color: var(--accent);
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  text-shadow: 0 0 20px rgba(138, 180, 248, 0.3);
  transition: all 0.3s ease;
}

@media (min-width: 768px) {
  .visit-counter-number {
    font-size: 48px;
  }
}

.visit-counter:hover .visit-counter-number {
  transform: scale(1.05);
  text-shadow: 0 0 30px rgba(138, 180, 248, 0.5);
}

/* Centered About Page Styles */
.hero-centered {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  padding: 32px 0;
}

.profile-section {
  margin-bottom: 48px;
}

.profile-section .profile-img {
  margin-bottom: 24px;
}

.content-centered {
  max-width: 800px;
  text-align: center;
  margin: 0 auto;
}

.content-centered p {
  margin-bottom: 24px;
  line-height: 1.7;
}

.content-centered img {
  margin: 3px auto;
}

.content-centered .imagedesc {
  margin-top: 4px;
  margin-bottom: 32px;
  font-style: italic;
  color: var(--muted);
}

.content-centered .cta-row {
  justify-content: center;
  margin-top: 32px;
}

/* Mobile responsive image fixes */
@media (max-width: 768px) {
  .profile-img, .general-img, .furry-img {
    max-width: 100%;
    width: 100%;
    height: auto;
    display: block;
    margin-left: auto;
    margin-right: auto;
  }
  
  .content-centered img {
    max-width: calc(100% - 32px);
    margin: 3px auto;
  }
}