:root{
  --article-bg:#f6f7fb;
  --article-panel:#ffffff;
  --article-panel-2:#f9fafc;
  --article-text:#172033;
  --article-muted:#667085;
  --article-border:#dce1ea;
  --article-border-2:#edf0f5;
  --article-link:#175cd3;
  --article-accent:#2563eb;
  --article-shadow:0 14px 35px rgba(15, 23, 42, .08);
  --article-radius:18px;
}

*{box-sizing:border-box}

body{
  background:var(--article-bg) !important;
  color:var(--article-text) !important;
  font-family:Arial, Helvetica, sans-serif !important;
}

body > header.hero,
body > .hero,
.tabbar,
aside.sidebar{
  display:none !important;
}

main.container{
  display:block !important;
  width:auto !important;
  max-width:1220px !important;
  min-height:0 !important;
  margin:18px auto 0 !important;
  padding:0 22px 46px !important;
  background:transparent !important;
}

.content{
  display:block !important;
  width:100% !important;
  max-width:1000px !important;
  margin:0 auto !important;
  padding:24px !important;
  background:var(--article-panel) !important;
  border:1px solid var(--article-border) !important;
  border-radius:var(--article-radius) !important;
  box-shadow:var(--article-shadow) !important;
}

.breadcrumb{
  color:var(--article-muted) !important;
  font-size:.92rem !important;
  margin:0 0 18px !important;
}

.breadcrumb a,
.back-link,
article a,
.content a{
  color:var(--article-link);
}

.back-link{
  display:inline-flex !important;
  align-items:center;
  min-height:38px;
  margin:0 0 12px !important;
  padding:8px 12px;
  border:1px solid var(--article-border);
  border-radius:999px;
  background:var(--article-panel-2);
  font-weight:800;
  text-decoration:none !important;
}

.back-link:hover{
  background:#eef4ff;
}

.article-header{
  margin:0 0 24px !important;
}

.article-title,
.content > h1,
article > h1{
  max-width:900px;
  margin:8px 0 10px !important;
  color:var(--article-text) !important;
  font-size:clamp(2rem, 4.4vw, 3.7rem) !important;
  line-height:1.02 !important;
  letter-spacing:-.045em !important;
}

.article-meta{
  color:var(--article-muted) !important;
  font-size:.96rem !important;
  line-height:1.45;
  margin:0 0 18px !important;
}

.article-hero{
  display:block !important;
  width:100% !important;
  max-width:920px !important;
  max-height:520px !important;
  height:auto !important;
  margin:20px auto 26px !important;
  border:1px solid var(--article-border) !important;
  border-radius:14px !important;
  background:var(--article-panel-2) !important;
  object-fit:contain !important;
  box-shadow:0 10px 24px rgba(15, 23, 42, .08) !important;
}

article{
  max-width:820px !important;
  margin:0 auto !important;
}

article h2,
.content h2{
  margin:30px 0 10px !important;
  color:var(--article-text) !important;
  font-size:clamp(1.35rem, 2.1vw, 1.85rem) !important;
  line-height:1.15 !important;
  letter-spacing:-.025em;
}

article h3,
.content h3{
  margin:22px 0 8px !important;
  color:var(--article-text) !important;
  line-height:1.25;
}

article p,
.content > p,
.content li,
article li{
  color:#344054;
  font-size:1.02rem;
  line-height:1.68;
}

article p,
.content > p{
  margin:12px 0;
}

article ul,
article ol,
.content ul,
.content ol{
  padding-left:1.3rem;
}

.callout{
  border:1px solid #bfdbfe !important;
  border-left:4px solid var(--article-accent) !important;
  background:#eff6ff !important;
  padding:16px 18px !important;
  border-radius:12px !important;
  margin:18px 0 !important;
}

.callout h3{
  margin-top:0 !important;
}

.card-grid,
.spoiler-grid,
.image-grid{
  gap:18px !important;
}

.card-grid img,
.spoiler-grid img,
.content figure img{
  border:1px solid var(--article-border) !important;
  border-radius:12px !important;
  box-shadow:0 10px 24px rgba(15, 23, 42, .08) !important;
}

.site-footer{
  max-width:1220px;
  margin:0 auto;
  padding:0 22px 34px;
  color:var(--article-muted);
  font-size:.9rem;
}

.footer-links{
  display:flex;
  flex-wrap:wrap;
  gap:14px;
  margin-bottom:8px;
}

.footer-links a{
  color:var(--article-link);
  text-decoration:none;
}

@media (max-width: 760px){
  main.container{
    padding:0 16px 34px !important;
  }

  .content{
    padding:18px !important;
    border-radius:14px !important;
  }

  .article-title,
  .content > h1,
  article > h1{
    font-size:clamp(1.9rem, 10vw, 2.6rem) !important;
  }
}