:root{
  --bg:#07080a;
  --card:#0f1720;
  --muted:#9298a2;
  --muted-2:#b9c4cc;
  --accent-start:#5ee7df;
  --accent-end:#7c5cff;
  --accent-solid:#0a84ff;
  --glass: rgba(255,255,255,0.03);
  --card-bg: linear-gradient(180deg, rgba(255,255,255,0.012), rgba(255,255,255,0.006));
  --radius:14px;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  min-height:100%;
  background: radial-gradient(800px 400px at 10% 10%, rgba(124,92,255,0.05), transparent 8%),
              radial-gradient(800px 400px at 90% 90%, rgba(94,231,223,0.03), transparent 8%),
              var(--bg);
  color:var(--muted-2);
  font-family:-apple-system,BlinkMacSystemFont,"SF Pro Text","Inter","Segoe UI",Roboto,system-ui,Arial,sans-serif;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  display:flex;
  flex-direction:column;
  -webkit-font-feature-settings: "liga" 1;
  font-feature-settings: "liga" 1;
}

.topbar{
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:10px;
  padding:14px 20px;
  border-bottom:1px solid rgba(255,255,255,0.03);
  background: transparent;
}
.lang-controls{ display:flex; gap:10px; align-items:center; }

.lang-btn{
  background: linear-gradient(180deg, rgba(255,255,255,0.018), rgba(255,255,255,0.008));
  color:var(--muted);
  border: 1px solid rgba(255,255,255,0.03);
  padding:6px 10px;
  border-radius:10px;
  cursor:pointer;
  font-weight:700;
  font-size:13px;
  transition: transform .12s ease, box-shadow .12s ease, color .12s ease;
  backdrop-filter: blur(6px);
}
.lang-btn:hover{ transform: translateY(-2px); color:var(--accent-solid); box-shadow: 0 6px 26px rgba(10,132,255,0.06); }
.lang-btn[aria-pressed="true"]{
  color: white;
  box-shadow: 0 10px 40px rgba(124,92,255,0.12), 0 2px 8px rgba(94,231,223,0.04);
  border: 1px solid rgba(124,92,255,0.18);
  background: linear-gradient(90deg, rgba(124,92,255,0.08), rgba(94,231,223,0.03));
}

.open-btn, .download-btn{
  padding:6px 10px;
  border-radius:10px;
  text-decoration:none;
  font-weight:700;
  background: transparent;
  color:var(--muted);
  border: 1px solid rgba(255,255,255,0.02);
  font-size:13px;
  transition: color .12s ease, box-shadow .12s ease, transform .12s ease;
}
.open-btn:hover, .download-btn:hover{
  color: #fff;
  transform: translateY(-2px);
  box-shadow: 0 8px 34px rgba(124,92,255,0.06);
}

.viewer{
  flex:1;
  display:flex;
  justify-content:center;
  padding:36px;
}
.content{
  max-width:980px;
  width:100%;
  background:var(--card-bg);
  border:1px solid rgba(255,255,255,0.03);
  border-radius:var(--radius);
  padding:40px;
  box-shadow: 0 18px 50px rgba(2,6,23,0.75);
  color:var(--muted-2);
  line-height:1.55;
  position:relative;
  overflow:hidden;
}

.content:after{
  content:'';
  position:absolute;
  right:-120px;
  top:-80px;
  width:360px;
  height:260px;
  pointer-events:none;
  background: radial-gradient(closest-side, rgba(124,92,255,0.08), transparent 40%),
              radial-gradient(closest-side, rgba(94,231,223,0.04), transparent 30%);
  transform: rotate(12deg);
  filter: blur(24px);
  opacity:.9;
}

.content .hero{ margin-bottom:18px; display:block; }
.content .hero h1{
  font-size:44px;
  margin:0;
  color:#eef3f8;
  font-weight:900;
  letter-spacing:0.8px;
  text-transform:uppercase;
}
.content .hero h2.hero-subtitle{
  font-size:28px;
  margin:-16px 0 0 0;
  color:var(--muted-2);
  font-weight:700;
  text-transform:none;
  letter-spacing:0.2px;
}

.content a{
  color: #6a8bb9;
  text-decoration: none;
  font-weight:700;
}
.content a:hover{
  text-decoration: underline;
  color: #9a7effc0;
}

.content section{ margin-top:40px; }
.content section > h2{ margin-bottom:8px; }
.content section p, .content section ul{ margin-top:0; }

.xp-panel h4{
  margin:0 0 10px 0;
  font-weight:600;
  color:var(--muted);
  font-size:14px;
  line-height:1.35;
  text-align: justify;
  text-justify: inter-word;
}

.xp-panel ul{
  margin:10px 0 16px 20px;
  color:var(--muted);
  font-size:14px;
  line-height:1.6;
}
.xp-panel ul li{
  margin-top: 10px;
  margin-bottom:8px;
  text-align: justify;
  text-justify: inter-word;
}

.xp-toggle{
  margin-bottom:14px;
}

.xp-toggle{
  cursor: pointer;
  display: flex;
  align-items: center;
  gap:12px;
  user-select: none;
  transition: transform .12s ease, box-shadow .12s ease, color .12s ease;
  border-radius:8px;
  padding:6px 6px;
  margin-bottom:14px;
}

.xp-panel{
  overflow: hidden;
  transition: max-height .26s ease, opacity .18s ease, margin .26s ease;
  max-height: 2000px;
  opacity: 1;
  margin-top: 6px;
  margin-bottom:12px;
}

.xp-panel.collapsed{
  max-height: 1.2em;
  opacity: 1;
  margin-top: 4px;
  position: relative;
  -webkit-mask-image: linear-gradient(black 65%, transparent 100%);
  mask-image: linear-gradient(black 65%, transparent 100%);
}

.xp-panel.collapsed::after{
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 1.1em;
  pointer-events: none;
  background: linear-gradient(to bottom, rgba(15,23,32,0), rgba(15,23,32,0.75));
  mix-blend-mode: normal;
  border-radius:0 0 10px 10px;
}

.xp-panel h4{
  margin:0;
  font-weight:600;
  color:var(--muted);
  font-size:14px;
  line-height:1.2em;
}

.xp-panel ul{
  margin:8px 0 14px 18px;
  color:var(--muted);
  font-size:14px;
  line-height:1.5;
}

.xp-dates{
  display:block;
  font-size:13px;
  color:var(--muted);
  margin-top:6px;
  font-weight:600;
}

@media (max-width:820px){
  .content{ padding:24px; border-radius:12px }
  .content .hero h1{ font-size:32px }
  .content .hero h2{ font-size:14px }
  .viewer{ padding:18px; }
}

a:focus, button:focus { outline: 3px solid rgba(10,132,255,0.12); outline-offset:3px; border-radius:8px; }