:root{
  --bg:#f6f7fb;
  --card:#ffffff;
  --text:#1f2937;
  --muted:#6b7280;
  --border:#e5e7eb;
  --accent:#2563eb;
  --accent2:#0ea5e9;
  --radius:16px;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  color:var(--text);
  background: radial-gradient(1200px 600px at 20% -10%, rgba(37,99,235,.12), transparent 60%),
              radial-gradient(900px 500px at 90% 0%, rgba(14,165,233,.10), transparent 55%),
              var(--bg);
  line-height:1.65;
}

header{
  padding:2rem 1rem 1.25rem;
  text-align:center;
}
header .wrap{
  max-width:980px;
  margin:0 auto;
  background:rgba(255,255,255,.85);
  backdrop-filter: blur(8px);
  border:1px solid var(--border);
  border-radius:24px;
  padding:1.5rem 1.25rem;
  box-shadow: 0 10px 30px rgba(17,24,39,.08);
}
header h1{margin:0;font-size:clamp(1.7rem, 3vw, 2.4rem); letter-spacing:-.02em}
header p{margin:.5rem 0 0;color:var(--muted)}

.lang{
  margin-top:1rem;
  display:flex;
  justify-content:center;
  gap:.5rem;
}
.lang a{
  text-decoration:none;
  font-size:.9rem;
  padding:.35rem .65rem;
  border-radius:999px;
  border:1px solid var(--border);
  color:var(--accent);
  background:#fff;
}
.lang a.active{
  background:linear-gradient(135deg, var(--accent), var(--accent2));
  color:#fff;
  border-color:transparent;
}

nav.toc{
  position:sticky;
  top:0;
  z-index:5;
  background:rgba(246,247,251,.8);
  backdrop-filter: blur(8px);
  border-bottom:1px solid var(--border);
}
nav.toc .wrap{
  max-width:980px;
  margin:0 auto;
  padding:.75rem 1rem;
  display:flex;
  gap:.75rem;
  justify-content:center;
  flex-wrap:wrap;
}
nav.toc a{
  text-decoration:none;
  color:var(--accent);
  font-size:.95rem;
  padding:.35rem .6rem;
  border-radius:999px;
  background:#fff;
  border:1px solid var(--border);
}

main{
  max-width:980px;
  margin:1.25rem auto 3rem;
  padding:0 1rem;
}

/* Collapsible sections */
details.sec, details.sub{
  background:var(--card);
  border:1px solid var(--border);
  border-radius:var(--radius);
  box-shadow: 0 10px 30px rgba(17,24,39,.06);
}
details.sec{margin:1rem 0}
details.sub{margin:.85rem 0}

summary{
  list-style:none;
  cursor:pointer;
  padding:1rem 1rem;
  display:flex;
  align-items:center;
  gap:.75rem;
}
summary::-webkit-details-marker{display:none}
summary::after{
  content:"▾";
  margin-left:auto;
  color:var(--muted);
  font-size:1.1rem;
  transition: transform .15s ease;
}
details[open] > summary::after{ transform: rotate(180deg); }

summary h2, summary h3{
  margin:0;
  line-height:1.2;
}
summary h2{font-size:1.25rem}
summary h3{font-size:1.05rem; color: #111827}

.content{
  padding:0 1rem 1rem;
}

/* Cards inside */
.card{
  border:1px solid var(--border);
  border-radius:14px;
  padding:1rem;
  background:linear-gradient(180deg, rgba(37,99,235,.04), transparent 55%), #fff;
  margin:.85rem 0;
}
.card h4{margin:.2rem 0 .6rem;font-size:1.05rem}
.meta{color:var(--muted); margin:.35rem 0}
.meta strong{color:var(--text)}
.badges{display:flex; gap:.5rem; flex-wrap:wrap; margin-top:.6rem}
.badge{
  display:inline-block;
  font-size:.85rem;
  padding:.2rem .5rem;
  border:1px solid var(--border);
  border-radius:999px;
  background:#fff;
  color:var(--muted);
}

/* Images */
.photo{
  width:100%;
  border-radius:14px;
  border:1px solid var(--border);
  display:block;
  margin:.6rem 0 .8rem;
}

/* Video embed */
.embed{
  position:relative;
  width:100%;
  aspect-ratio:16/9;
  border-radius:14px;
  overflow:hidden;
  border:1px solid var(--border);
  background:#000;
  margin:.6rem 0;
}
.embed iframe{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
}

ul, ol{padding-left:1.2rem}
li{margin:.35rem 0}
a{color:var(--accent)}
footer{ text-align:center; color:var(--muted); padding:2rem 1rem; }