#app{width:100%}

.content{min-height:100vh;padding:60px 30px;background-color:var(--surface);margin-top:10px}
.content h2,.content h3,.content h4,.content h5{font-size:24px;color:var(--text-secondary);margin:10px 0}
.content p,.content b,.content li{font-size:18px;color:var(--text-secondary);margin:10px 0;word-wrap:break-word}
.content ul,.content ol{padding-left:24px;margin:10px 0}
.content a{color:var(--primary);word-wrap:break-word}
.content img{display:block;max-width:100%;height:auto;margin:10px 0;border-radius:8px}

.article-container{padding:12px 20px}
.article-container .article-content{display:grid;grid-template-columns:100%;gap:10px}
.article-container .article-title{font-size:22px;font-weight:500;line-height:1.35;color:var(--text)}
.article-container .article-summary{font-size:14px;color:var(--text-secondary);line-height:1.5}
.article-container .subtitle{font-size:18px;font-weight:500;color:#333}
.article-container .content-paragraph{font-size:14px;color:var(--text-secondary);line-height:1.6}
.ads-1.special-ads{grid-row:2/span 1}
.ads-2.special-ads{grid-row:5/span 1}
.ads-3.special-ads{display:none}

.article-container .app-card{width:100%;display:flex;flex-direction:column;margin-bottom:10px;background-color:var(--surface);border-radius:16px;padding:12px;min-width:0}
.article-container .app-card .app-content{display:flex;align-items:center;margin-bottom:10px;gap:10px;min-width:0}
.article-container .app-card .app-content .app-logo{width:96px;height:96px;border-radius:5px;overflow:hidden;flex:0 0 auto}
.article-container .app-card .app-content .app-info{display:flex;flex-direction:column;flex:1;min-width:0}
.article-container .app-card .app-content .app-info .app-title{font-size:18px;font-weight:500;color:#333}
.article-container .app-card .app-content .app-info .app-developer{font-size:16px;color:var(--text-secondary)}
.article-container .app-card .app-stats{display:flex;gap:24px}
.article-container .app-card .app-stats .rating,.article-container .app-card .app-stats .installs{display:flex;flex-direction:column}
.article-container .app-card .app-stats .rating-score,.article-container .app-card .app-stats .install-count{font-size:16px;font-weight:500;color:var(--text)}
.article-container .app-card .app-stats .rating-text,.article-container .app-card .app-stats .install-text{font-size:12px;color:var(--text-muted)}
.article-container .app-card .app-cta{margin-top:10px;display:flex;align-items:center;justify-content:center;height:40px;border-radius:20px;background-color:var(--primary);color:var(--surface);font-size:14px;font-weight:500}

#aside{display:none}

@media (min-width:1024px){
  .content{min-height:80vh;padding:96px;margin-top:16px}
  .content h2,.content h3,.content h4{font-size:48px}
  .content h5{font-size:35.2px}
  .content p,.content b,.content li{font-size:28.8px}

  #app{padding:22px var(--content-gutter);display:grid;grid-template-columns:calc(100% - 325px - 24px) 325px;gap:24px}
  #app > .content{grid-column:1/span 2;padding:96px}
  .article-container{padding:0;min-width:0}
  .article-container .article-content{gap:20px}
  .article-container .article-title{font-size:32px}
  .article-container .article-summary{font-size:16px;color:#444;line-height:1.4}
  .article-container .subtitle{font-size:24px}
  .article-container .content-paragraph{font-size:16px}
  .ads-3.special-ads{display:block;grid-row:8/span 1}

  .article-container .app-card{border-radius:16px;padding:10px 20px}
  .article-container .app-card .app-content .app-logo{width:96px;height:96px;border-radius:12px}
  .article-container .app-card .app-cta{width:180px}

  #aside{display:block;width:325px;min-width:0}
  #aside ul{display:flex;flex-direction:column;gap:8px}
  #aside .app-card{width:100%;background-color:var(--surface);border-radius:16px;overflow:hidden}
  #aside .app-card a{display:flex;align-items:center;gap:12px;padding:12px;min-width:0}
  #aside .app-card .app-cover{width:60px;flex:0 0 auto}
  #aside .app-card .app-cover .image-box{border-radius:12px;overflow:hidden;box-shadow:0 1px 2px 0 rgba(0,0,0,.25)}
  #aside .app-card .app-card-content{min-width:0}
  #aside .app-card .app-info{display:flex;flex-direction:column;min-width:0}
  #aside .app-card .app-name{font-size:16px;font-weight:500;color:var(--text);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  #aside .app-card .app-developer{font-size:12px;color:var(--text-secondary);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  #aside .app-card:hover .app-name{color:var(--primary)}
}