:root{
  --bg: #0b0f17;
  --card: rgba(255,255,255,.06);
  --text: rgba(255,255,255,.92);
  --muted: rgba(255,255,255,.68);
  --line: rgba(255,255,255,.14);
  --accent: rgba(120, 205, 255, .95);
  --shadow: 0 10px 30px rgba(0,0,0,.35);
  --radius: 16px;
}

html[data-theme="light"]{
  --bg: #f7f8fb;
  --card: rgba(0,0,0,.04);
  --text: rgba(0,0,0,.92);
  --muted: rgba(0,0,0,.64);
  --line: rgba(0,0,0,.12);
  --accent: rgba(0, 92, 185, .95);
  --shadow: 0 10px 30px rgba(0,0,0,.10);
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial, "Apple Color Emoji","Segoe UI Emoji";
  background: var(--bg);
  color:var(--text);
  line-height:1.6;
}
html[data-theme="light"] body{
  background: var(--bg);
}

.container{max-width: 980px; margin: 0 auto; padding: 0 18px;}
.site-header{
  position: sticky; top: 0;
  backdrop-filter: blur(10px);
  background: rgba(11,15,23,.65);
  border-bottom: 1px solid var(--line);
  z-index: 10;
}
html[data-theme="light"] .site-header{
  background: rgba(247,248,251,.72);
}
.site-header .container{
  display:flex; align-items:center; justify-content:space-between;
  gap: 18px;
  padding: 14px 18px;
}
.brand__title{
  font-weight: 800;
  letter-spacing: .2px;
  text-decoration:none;
  color: var(--text);
}
.brand__title:hover{color: var(--accent)}
.brand__tagline{font-size: .95rem; color: var(--muted); margin-top: 2px}
.header-right{display:flex; gap: 12px; align-items:center}
.nav{display:flex; flex-wrap:wrap; gap: 10px; justify-content:flex-end}
.nav__link{
  color: var(--muted);
  text-decoration:none;
  padding: 8px 10px;
  border: 1px solid transparent;
  border-radius: 999px;
}
.nav__link:hover{
  color: var(--text);
  border-color: var(--line);
  background: rgba(255,255,255,.04);
}

.nav__link.is-active{
  color: var(--text);
  border-color: var(--line);
  background: rgba(255,255,255,.06);
}
html[data-theme="light"] .nav__link.is-active{
  background: rgba(0,0,0,.06);
}
html[data-theme="light"] .nav__link:hover{
  background: rgba(0,0,0,.03);
}

.theme-toggle{
  display:inline-flex;
  align-items:center;
  gap: 8px;
  cursor:pointer;
  border: 1px solid var(--line);
  background: rgba(255,255,255,.03);
  color: var(--muted);
  padding: 8px 10px;
  border-radius: 999px;
  font: inherit;
  line-height: 1;
}
.theme-toggle:hover{
  color: var(--text);
  border-color: rgba(120,205,255,.35);
  background: rgba(255,255,255,.06);
}
html[data-theme="light"] .theme-toggle:hover{
  border-color: rgba(0, 92, 185, .35);
}

.lang-switch{display:flex; gap:6px; align-items:center}
.lang-pill{
  font-size:.92rem;
  text-decoration:none;
  color: var(--muted);
  border: 1px solid var(--line);
  padding: 6px 10px;
  border-radius: 999px;
  background: rgba(255,255,255,.03);
}
.lang-pill:hover{color:var(--text)}
.lang-pill--active{
  color: var(--text);
  border-color: rgba(120,205,255,.45);
  background: rgba(120,205,255,.12);
}


/* Language menu (handles many languages, mobile-friendly) */
.lang-menu{position:relative;}
.lang-menu__summary{
  list-style:none;
  cursor:pointer;
  user-select:none;
  display:flex;
  align-items:center;
  gap:8px;
  font-size:.92rem;
  text-decoration:none;
  color: var(--muted);
  border: 1px solid var(--line);
  padding: 6px 10px;
  border-radius: 999px;
  background: rgba(255,255,255,.03);
}
.lang-menu__summary:hover{color:var(--text)}
.lang-menu__summary::-webkit-details-marker{display:none;}
.lang-menu[open] .lang-menu__summary{
  color: var(--text);
  border-color: rgba(120,205,255,.45);
  background: rgba(120,205,255,.12);
}
.lang-menu__panel{
  position:absolute;
  right:0;
  top:calc(100% + 8px);
  min-width: 200px;
  max-width: min(320px, calc(100vw - 28px));
  max-height: 60vh;
  overflow:auto;
  -webkit-overflow-scrolling: touch;
  background: rgba(11,15,23,.96);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 6px;
  box-shadow: 0 10px 30px rgba(0,0,0,.25);
  z-index: 1000;
}
html[data-theme="light"] .lang-menu__panel{
  background: rgba(247,248,251,.98);
  box-shadow: 0 10px 30px rgba(0,0,0,.12);
}
.lang-menu__item{
  display:block;
  padding: 9px 10px;
  border-radius: 10px;
  text-decoration:none;
  color: var(--text);
  font-size: .95rem;
}
.lang-menu__item:hover{background: rgba(255,255,255,.06);}
html[data-theme="light"] .lang-menu__item:hover{background: rgba(0,0,0,.05);}
.lang-menu__item.is-active{color: var(--muted);}
.hero{padding: 26px 0 10px}
.hero h1{margin:0 0 6px; font-size: 2rem}
.muted{color: var(--muted)}
.dot{margin: 0 8px; color: var(--muted)}
.posts{display:flex; flex-direction:column; gap: 14px; padding-bottom: 34px}
.card{
  padding: 16px 18px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--card);
  box-shadow: var(--shadow);
}
.card__meta{font-size:.92rem; color: var(--muted)}
.card__title{margin: 10px 0 6px; font-size: 1.25rem; line-height:1.25}
.card__title a{color: var(--text); text-decoration:none}
.card__title a:hover{color: var(--accent)}
.card__excerpt{margin:0; color: var(--muted)}
.post{padding: 26px 0 34px}
.post__header{margin-bottom: 12px}
.post__meta{color: var(--muted); font-size:.95rem}
.post__title{margin: 10px 0 0; font-size: 2.1rem; line-height:1.15}
.post__translations{margin-top: 10px; color: var(--muted); font-size:.95rem}
.pill{
  display:inline-block;
  margin-left:8px;
  text-decoration:none;
  color: var(--text);
  border:1px solid var(--line);
  padding: 4px 10px;
  border-radius: 999px;
  background: rgba(255,255,255,.04);
}
.pill:hover{border-color: rgba(120,205,255,.45); color: var(--accent)}
.post__content{
  margin-top: 18px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: rgba(255,255,255,.04);
  padding: 18px 18px;
}
.post__content h1,.post__content h2,.post__content h3{
  line-height:1.2;
  margin-top: 1.2em;
}
.post__content a{color: var(--accent)}
.post__content code{
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
  font-size: .95em;
  background: rgba(255,255,255,.08);
  padding: .15em .35em;
  border-radius: 8px;
}
.post__content pre{
  overflow:auto;
  padding: 14px 14px;
  border-radius: 14px;
  border: 1px solid var(--line);
  background: rgba(0,0,0,.25);
}
.post__content pre code{background: transparent; padding:0}
.sep{border:0; border-top: 1px solid var(--line); margin: 26px 0}
.site-footer{
  border-top: 1px solid var(--line);
  padding: 18px 0;
  background: rgba(0,0,0,.15);
}

/* Responsive navigation (adds a toggle button via theme.js) */
.menu-toggle{
  display:none;
  align-items:center;
  gap: 8px;
  cursor:pointer;
  border: 1px solid var(--line);
  background: rgba(255,255,255,.03);
  color: var(--muted);
  padding: 8px 10px;
  border-radius: 999px;
  font: inherit;
  line-height: 1;
}
.menu-toggle:hover{
  color: var(--text);
  border-color: rgba(120,205,255,.35);
  background: rgba(255,255,255,.06);
}
html[data-theme="light"] .menu-toggle:hover{
  border-color: rgba(0, 92, 185, .35);
}

/* Post content media should scale */
.post__content img{
  max-width: 100%;
  height: auto;
  display: block;
  margin: 14px auto;
  border-radius: 12px;
}
.post__content iframe,
.post__content video{
  max-width: 100%;
}
.post__content table{display:block; overflow-x:auto; max-width:100%}

/* Pagination */
.pagination{
  margin: 22px 0 6px;
}
.pagination__inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 10px;
}
.pagination__pages{
  display:flex;
  gap: 6px;
  flex-wrap: wrap;
  justify-content:center;
  flex: 1;
}
.pagination__link,
.pagination__page{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding: 8px 10px;
  border-radius: 12px;
  border: 1px solid var(--line);
  background: rgba(255,255,255,.03);
  color: var(--text);
  text-decoration:none;
  white-space: nowrap;
}
.pagination__page.is-current{
  font-weight: 700;
  background: rgba(125, 200, 255, .12);
}

.pagination__ellipsis{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding: 8px 10px;
  border-radius: 12px;
  border: 1px solid transparent;
  color: var(--muted);
  white-space: nowrap;
}
.pagination__link.is-disabled{
  opacity: .5;
}

@media (max-width: 760px){
  .pagination__inner{flex-wrap: wrap; justify-content:center;}
}

@media (max-width: 760px){

  body.menu-open{overflow:hidden;}
  .site-header .container{
    flex-wrap: wrap;
    align-items: flex-start;
  }
  .header-right{
    width: 100%;
    justify-content: space-between;
  }
  .menu-toggle{display:inline-flex;}

  /* Only collapse nav when JS is enabled (so it still works without JS) */
  html.js .nav{
    /* Mobile menu is an overlay so opening it doesn't shift the page */
    display:none;
    position: fixed;
    left: 0;
    right: 0;
    top: var(--header-h, 64px);
    z-index: 999;
    width: 100%;
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    gap: 4px;
    padding: 10px 14px 12px;
    background: rgba(11,15,23,.96);
    border-bottom: 1px solid var(--line);
    max-height: calc(100vh - var(--header-h, 64px));
    overflow: auto;
    -webkit-overflow-scrolling: touch;
  }
  html[data-theme="light"].js .nav{
    background: rgba(247,248,251,.98);
  }
  html.js .nav.is-open{display:flex;}

  .nav{
    width: 100%;
    justify-content: flex-start;
  }
  .nav__link{
    display:block;
    width: 100%;
    border-radius: 12px;
    padding: 10px 12px;
  }
}