/* Telegram design system — no legacy framework dependencies. */
:root {
  --tg-blue:#168acd; --tg-blue-dark:#0875b4; --tg-ink:#30363b; --tg-muted:#667782;
  --tg-line:#e5ebef; --tg-wash:#f3f9fc; --tg-white:#fff; --tg-container:1080px;
  --tg-radius:12px; --tg-font:Arial,"Helvetica Neue","PingFang SC","Microsoft YaHei",sans-serif;
}
* { box-sizing:border-box }
html { scroll-behavior:smooth; scroll-padding-top:90px }
body { margin:0; color:var(--tg-ink); background:var(--tg-white); font:16px/1.65 var(--tg-font); -webkit-font-smoothing:antialiased }
a { color:var(--tg-blue); text-decoration:none; transition:color .18s }
a:hover { color:var(--tg-blue-dark); text-decoration:underline }
button,input,textarea { font:inherit }
button,a,summary { -webkit-tap-highlight-color:transparent }
:focus-visible { outline:3px solid #168acd; outline-offset:5px }
img,svg,video { max-width:100%; height:auto }
img { vertical-align:middle }
h1,h2,h3,p { margin:0 0 16px }
h1,h2,h3 { line-height:1.28; font-weight:600 }
h1 { font-size:clamp(30px,4vw,42px); letter-spacing:-.025em }
h2 { font-size:28px }
h3 { font-size:20px }
.container { width:min(var(--tg-container),calc(100% - 48px)); margin-inline:auto }
.narrow { max-width:800px }
.center { text-align:center }
.site-header { background:#fffffff5; border-bottom:1px solid var(--tg-line); position:sticky; top:0; z-index:20; backdrop-filter:blur(12px) }
.header-inner { display:flex; align-items:center; gap:28px; min-height:68px }
.brand { display:flex; align-items:center; gap:9px; font-size:19px; font-weight:600; color:var(--tg-ink); white-space:nowrap }
.brand:hover { text-decoration:none }
.primary-nav { display:flex; align-items:stretch; align-self:stretch; gap:26px; margin-right:auto }
.primary-nav a { display:flex; align-items:center; position:relative; font-size:15px; white-space:nowrap }
.primary-nav a[aria-current]::after { content:""; position:absolute; bottom:0; height:3px; border-radius:3px 3px 0 0; background:var(--tg-blue); left:0; right:0 }
.language-switch { position:relative; align-self:stretch; display:flex; align-items:center; margin-left:auto; font-size:16px; white-space:nowrap; color:var(--tg-blue) }
.language-switch summary { display:flex; align-items:center; gap:6px; min-height:46px; cursor:pointer; list-style:none; padding:8px 12px; border-bottom:3px solid transparent }
.language-switch summary::-webkit-details-marker { display:none }
.language-switch[open] summary { border-bottom-color:var(--tg-blue) }
.language-caret { width:0; height:0; border:4px solid transparent; border-top-color:currentColor; transform:translateY(2px) }
.language-panel { position:absolute; right:0; top:calc(100% + 3px); display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:4px 12px; padding:18px; width:min(350px,calc(100vw - 32px)); background:#fff; border:1px solid #e3e3e3; border-radius:11px; box-shadow:0 2px 9px #0002; z-index:30 }
.language-switch:not([open]) .language-panel { display:none }
.language-panel a { display:block; padding:10px 12px; color:var(--tg-blue); border-radius:5px; font-size:15px }
.language-panel a:hover { background:var(--tg-wash); text-decoration:none }
.language-panel a[aria-current] { color:#111; font-weight:500 }
.menu-toggle { display:none; border:1px solid var(--tg-line); background:white; border-radius:6px; color:var(--tg-blue); padding:7px 12px; cursor:pointer }
.skip-link { position:fixed; top:-100px; left:20px; background:white; padding:12px; z-index:100 }
.skip-link:focus { top:10px }
.hero { text-align:center; padding-top:52px }
.hero-logo { width:128px; height:128px; margin-bottom:13px }
.hero h1 { font-size:44px; font-weight:500; margin-bottom:2px; letter-spacing:-1.5px }
.hero-tagline { font-size:21px; color:var(--tg-muted); margin-bottom:36px; font-weight:300 }
.mobile-apps { display:flex; justify-content:center; gap:60px; margin:0 auto 24px; max-width:720px }
.device-link { display:flex; flex-direction:column; align-items:center; font-size:20px; gap:18px }
.device-link img { width:290px; height:300px; object-fit:contain; object-position:bottom }
.more-link { display:inline-block; font-size:16px; margin:10px 0 30px }
.desktop-apps { margin:0 auto; max-width:1000px }
.desktop-apps>img { width:100%; max-height:410px; object-fit:contain }
.desktop-apps>div { display:flex; justify-content:center; gap:110px; font-size:20px; margin-top:20px }
.section { padding-block:55px }
.section-heading { display:flex; justify-content:space-between; align-items:baseline; gap:20px; margin-bottom:28px }
.section-heading h2 { margin:0 }
.section-heading>a { font-size:15px; flex-shrink:0 }
.section-title { margin-bottom:32px }
.post-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:34px 26px }
.post-card { min-width:0; display:flex; flex-direction:column; border:1px solid var(--tg-line); border-radius:var(--tg-radius); overflow:hidden; background:white }
.post-card-image { display:flex; aspect-ratio:16/10; align-items:center; justify-content:center; background:var(--tg-wash); overflow:hidden }
.post-card-image>img { width:100%; height:100%; object-fit:cover; transition:transform .25s }
.post-card-image>img.placeholder-image { width:145px; height:145px; object-fit:contain }
.post-card:hover .post-card-image>img { transform:scale(1.035) }
.post-card-body { padding:20px; display:flex; flex-direction:column; flex:1; min-width:0 }
.post-card time { font-size:12px; color:var(--tg-muted); margin-bottom:9px; letter-spacing:.03em }
.post-card h3 { font-size:19px; line-height:1.4; margin-bottom:10px; overflow-wrap:anywhere }
.post-card h3 a { display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden }
.post-card .description { display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2; line-clamp:2; overflow:hidden; text-overflow:ellipsis; white-space:normal; overflow-wrap:anywhere; font-size:14px; line-height:1.7; height:3.4em; color:var(--tg-muted); margin:0 0 20px }
.read-more { margin-top:auto; font-size:14px }
.feature-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:38px 55px }
.feature { text-align:center }
.feature img { width:200px; height:200px; object-fit:contain; margin-bottom:15px }
.feature h3 { color:var(--tg-blue); font-size:30px; font-weight:400; margin-bottom:10px }
.feature p { font-size:17px; line-height:1.65; max-width:300px; margin-inline:auto }
.faq-section { max-width:850px; padding-bottom:80px }
.faq-list { border-top:1px solid var(--tg-line) }
.faq-list details { border-bottom:1px solid var(--tg-line) }
.faq-list summary { list-style:none; padding:21px 40px 21px 0; font-weight:600; cursor:pointer; position:relative; font-size:17px }
.faq-list summary::-webkit-details-marker { display:none }
.faq-list summary::after { content:"+"; position:absolute; right:8px; top:17px; font-size:25px; font-weight:400; color:var(--tg-blue) }
.faq-list details[open] summary::after { content:"−" }
.faq-list details p { margin:0 40px 22px 0; color:var(--tg-muted) }
.page-heading { padding:54px 0 38px }
.page-heading>p:not(.eyebrow) { color:var(--tg-muted); max-width:660px; font-size:18px }
.page-heading.center>p { margin-inline:auto }
.eyebrow { font-size:12px; font-weight:700; letter-spacing:.16em; color:var(--tg-blue); margin-bottom:14px }
.listing-page { padding-bottom:80px; min-height:65vh }
.pagination { margin-top:50px }
.pagination ul { padding:0; list-style:none; display:flex; flex-wrap:wrap; gap:8px; justify-content:center }
.pagination .page-numbers:not(ul) { min-width:42px; min-height:42px; display:flex; align-items:center; justify-content:center; padding:6px 13px; border:1px solid var(--tg-line); border-radius:7px }
.pagination .current { color:white; background:var(--tg-blue); border-color:var(--tg-blue) }
.empty-state { padding:50px 24px; border:1px dashed var(--tg-line); text-align:center; border-radius:var(--tg-radius); color:var(--tg-muted) }
.article-page { padding-top:28px; padding-bottom:20px }
.breadcrumbs { display:flex; flex-wrap:wrap; gap:12px; font-size:14px; color:var(--tg-muted); margin-bottom:32px }
.article-shell { max-width:800px; margin-inline:auto }
.article-heading { text-align:center; margin-bottom:32px }
.article-heading time { color:var(--tg-muted); font-size:14px }
.article-heading h1 { margin-top:14px; line-height:1.35; overflow-wrap:anywhere }
.article-categories { font-size:14px }
.article-cover { margin-bottom:35px }
.article-cover img { width:100%; height:auto; border-radius:var(--tg-radius) }
.prose { font-size:17px; line-height:1.85; overflow-wrap:anywhere }
.prose h2 { margin:36px 0 16px; font-size:26px }
.prose h3 { margin:28px 0 12px; font-size:21px }
.prose p,.prose ul,.prose ol { margin-bottom:22px }
.prose a { text-decoration:underline; text-underline-offset:3px }
.prose img { max-width:100%; height:auto; border-radius:8px }
.prose figure { max-width:100%; margin:28px 0 }
.prose figcaption { text-align:center; color:var(--tg-muted); font-size:13px }
.prose blockquote { margin:28px 0; padding:16px 24px; background:var(--tg-wash); border-left:3px solid var(--tg-blue) }
.prose blockquote p:last-child { margin-bottom:0 }
.prose pre { overflow:auto; max-width:100%; padding:20px; border-radius:8px; background:var(--tg-wash); font-size:14px }
.prose table { display:block; max-width:100%; overflow-x:auto; border-collapse:collapse }
.prose th,.prose td { border:1px solid var(--tg-line); padding:10px 14px }
.prose iframe { max-width:100%; border:0 }
.prose iframe[src*="youtube"],.prose iframe[src*="youtu.be"],.prose iframe[src*="vimeo"] { width:100%; height:auto; aspect-ratio:16/9 }
.prose .aligncenter { display:block; margin-inline:auto }
.prose .alignleft { float:left; margin:0 24px 16px 0 }
.prose .alignright { float:right; margin:0 0 16px 24px }
.prose::after { content:""; display:block; clear:both }
.article-tags { display:flex; flex-wrap:wrap; gap:8px; margin-top:24px }
.article-tags a { padding:3px 12px; border-radius:20px; background:var(--tg-wash); font-size:13px }
.post-navigation { border-top:1px solid var(--tg-line); padding-top:24px; margin-top:32px; display:grid; grid-template-columns:1fr 1fr; gap:24px; font-size:15px; overflow-wrap:anywhere }
.post-navigation>div:last-child { text-align:right }
.document-layout { display:grid; grid-template-columns:210px minmax(0,1fr); gap:65px; padding-bottom:80px }
.document-toc { align-self:start; position:sticky; top:110px; margin-top:66px; border-left:2px solid var(--tg-line); padding-left:20px; font-size:14px }
.document-toc p { color:var(--tg-muted); font-size:12px }
.document-toc a { display:block; margin:12px 0 }
.document .page-heading { border-bottom:1px solid var(--tg-line); padding-bottom:22px }
.notice { padding:20px 24px; margin-top:36px; background:var(--tg-wash); border-radius:8px; font-size:15px }
.app-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:28px }
.app-card { text-align:center; border:1px solid var(--tg-line); padding:30px 20px; border-radius:var(--tg-radius) }
.app-card>img { width:100%; height:220px; object-fit:contain; margin-bottom:24px }
.app-card h2 { font-size:23px }
.app-card p { color:var(--tg-muted); font-size:14px }
.button { display:inline-flex; padding:10px 18px; background:var(--tg-blue); border-radius:7px; color:white; font-size:14px; justify-content:center }
.button:hover { color:white; background:var(--tg-blue-dark); text-decoration:none }
.site-footer { border-top:1px solid var(--tg-line); padding:40px 0 20px }
.footer-grid { display:grid; grid-template-columns:2fr repeat(4,1fr); gap:30px; font-size:14px }
.footer-grid h2,.footer-grid h3 { font-size:16px; margin-bottom:14px }
.footer-about p { color:var(--tg-muted); line-height:1.7 }
.footer-about small { font-size:12px; color:var(--tg-muted) }
.footer-grid>div>a { display:block; margin-bottom:8px }
.footer-bottom { margin-top:28px; border-top:1px solid var(--tg-line); padding-top:20px; font-size:12px; color:var(--tg-muted) }
.footer-bottom a { margin-left:8px }
.screen-reader-text { position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap }
/* Homepage news follows the two-column editorial layout. */
.home-news { max-width:950px; padding-top: 80px; }
.home-news .section-title { font-weight:400; font-size:28px; margin-bottom:36px }
.recent-news-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:64px }
.recent-news-card { min-width:0 }
.recent-news-image { position:relative; display:flex; width:100%; aspect-ratio:1.55; align-items:center; justify-content:center; margin-bottom:18px; overflow:hidden; border-radius:30px; isolation:isolate }
.recent-news-image::after { content:""; position:absolute; inset:0; border-radius:inherit; box-shadow:inset 0 0 13px 6px #fff; pointer-events:none }
.recent-news-image img { width:100%; height:100%; object-fit:cover }
.recent-news-placeholder { display:block; width:100%; height:100%; background:linear-gradient(135deg,#69d0f8 0%,#239ddc 45%,#0878c0 100%) }
.news-page { max-width:950px }
.news-page .page-heading { padding:40px 0 30px }
.news-page .page-heading h1 { font-size:26px; font-weight:400; letter-spacing:0; margin:0 }
.recent-news-card h3 { font-size:20px; font-weight:400; line-height:1.6; margin-bottom:4px; overflow-wrap:anywhere }
.recent-news-card .description { display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; text-overflow:ellipsis; overflow-wrap:anywhere; line-height:1.65; font-size:17px; margin-bottom:6px }
.recent-news-card time { color:#87939b; font-size:16px }
/* Standalone documentation pages: one reading column, no cards or sidebar. */
.official-document { position:relative; width:min(800px,calc(100% - 40px)); margin:48px auto 80px; font-size:15px; line-height:1.65; color:#4a4a4a; overflow-wrap:anywhere; min-height:60vh }
.official-document h1 { font-size:21px; font-weight:600; letter-spacing:0; margin:0 0 12px }
.official-document h2 { font-size:20px; font-weight:600; margin:28px 0 8px }
.official-document h3 { font-size:17px; margin:24px 0 8px }
.official-document p { margin-bottom:18px }
.official-document hr { height:1px; border:0; background:#eee; margin:20px 0 30px; clear:both }
.official-document blockquote { margin:0 0 18px; padding:5px 9px; background:#edf8fe; border-left:2px solid #2aabee; border-radius:0 8px 8px 0; clear:both }
.official-document blockquote p { margin:0 }
.official-link-list { list-style:none; padding:0; margin:0 }
.official-link-list li { margin:3px 0 }
.faq-directory-group { margin-bottom:40px }
.faq-directory-group h2 { font-size:15px; margin:0 0 17px }
.faq-directory-group .official-link-list li { margin:3px 0 }
.faq-contact-links { margin-top:28px }
.faq-answers section { margin-bottom:28px }
.apps-mascot { position:absolute; width:160px; height:160px; left:-180px; top:8px; object-fit:contain }
.official-apps .app-link-section { margin-top:30px; margin-bottom:38px }
.official-apps .app-link-section h2 { font-size:16px; margin:0 0 8px }
.official-apps .app-link-section p { line-height:1.8 }
.app-platform-list li { margin:9px 0 }
.app-platform-list a { display:inline-flex; align-items:center; gap:10px }
.platform-icon { display:inline-block; width:24px; height:24px; color:#319ed5; font-size:24px; line-height:24px; text-align:center; flex-shrink:0 }
.platform-icon img { width:24px; height:24px; object-fit:contain }
.monitor-icon::before { content:""; display:block; width:20px; height:14px; margin:3px 2px; border:2px solid currentColor; border-radius:2px; background:currentColor }
.monitor-icon::after { content:""; display:block; width:12px; height:2px; margin:0 auto; background:currentColor }
.laptop-icon { border-bottom:3px solid currentColor }
.laptop-icon::before { content:""; display:block; width:18px; height:15px; border:2px solid currentColor; margin:3px auto 0 }
.source-list li { margin:7px 0 }
.botfather-link { float:right; width:160px; margin:4px 0 12px 18px }
.botfather-link img { display:block; width:100%; height:auto }
.official-api section::after { content:""; display:block; clear:both }
@media (max-width:1024px) {
  .apps-mascot { position:static; float:right; width:110px; height:110px; margin:0 0 16px 20px }
  .header-inner { gap:20px }
  .primary-nav { gap:20px }
  .brand span { display:none }
  .feature-grid { gap:35px }
  .document-layout { gap:36px; grid-template-columns:180px minmax(0,1fr) }
  .footer-grid { gap:22px }
}
@media (max-width:767px) {
  .official-document { width:calc(100% - 32px); margin-top:32px }
  .recent-news-grid { gap:28px }
  .recent-news-card h3 { font-size:18px }
  .recent-news-card .description { font-size:15px }
  .container { width:calc(100% - 32px) }
  .header-inner { min-height:62px; flex-wrap:wrap; gap:12px; padding-block:10px }
  .brand span { display:inline }
  .language-switch { position:static; margin-left:auto }
  .language-panel { right:16px }
  .menu-toggle { display:block; order:2 }
  .primary-nav { order:3; flex-basis:100%; gap:0; display:grid; grid-template-columns:repeat(3,1fr); margin:0 }
  .primary-nav a { padding:12px 10px; justify-content:center }
  .has-js .primary-nav { display:none }
  .has-js .primary-nav.is-open { display:grid }
  .hero { padding-top:35px }
  .hero-logo { width:100px; height:100px }
  .hero h1 { font-size:38px }
  .hero-tagline { font-size:18px }
  .mobile-apps { gap:20px }
  .device-link { font-size:16px }
  .device-link img { height:240px; width:230px }
  .desktop-apps>div { gap:35px; font-size:16px }
  .section { padding-block:36px }
  h2 { font-size:25px }
  .post-grid,.app-grid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:22px 18px }
  .feature-grid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:28px }
  .feature img { width:130px; height:130px }
  .feature h3 { font-size:22px }
  .document-layout { display:block }
  .document-toc { position:static; margin-top:28px; display:flex; flex-wrap:wrap; gap:8px 18px }
  .document-toc p { width:100%; margin:0 }
  .document-toc a { margin:0 }
  .page-heading { padding:36px 0 28px }
  .page-heading>p:not(.eyebrow) { font-size:16px }
  .footer-grid { grid-template-columns:repeat(2,1fr); gap:25px }
  .footer-about { grid-column:1/-1 }
  .footer-about p { max-width:440px }
}
@media (max-width:480px) {
  .recent-news-grid { grid-template-columns:1fr; gap:32px }
  .botfather-link { width:100px; margin-left:12px }
  .apps-mascot { width:80px; height:80px; margin-left:12px }
  .brand { font-size:17px; gap:6px }
  .language-switch { font-size:14px }
  .menu-toggle { padding:5px 8px; font-size:13px }
  .mobile-apps { gap:12px }
  .device-link { font-size:14px; gap:12px }
  .device-link img { height:190px; width:155px }
  .desktop-apps>div { gap:20px; font-size:14px }
  .post-grid,.app-grid { grid-template-columns:1fr }
  .post-card-image { aspect-ratio:16/9 }
  .section-heading { gap:12px }
  .section-heading h2 { font-size:23px }
  .section-heading>a { font-size:13px }
  .feature-grid { gap:22px 16px }
  .feature img { width:110px; height:110px }
  .feature p { font-size:14px }
  .feature h3 { font-size:20px }
  .prose { font-size:16px }
  .prose h2 { font-size:23px }
  .prose .alignleft,.prose .alignright { float:none; margin:20px 0 }
  .article-heading { text-align:left }
  .article-heading h1 { font-size:29px }
  .faq-list summary { font-size:16px }
}
@media (prefers-reduced-motion:reduce) {
  html { scroll-behavior:auto }
  *,*::before,*::after { transition:none!important }
}