/* Brainy stays in document flow and never obscures controls. */
.brainy{display:block;object-fit:contain;flex-shrink:0;max-width:100%;height:auto}
.brainy-home{width:200px;height:200px;margin:0 auto 12px}
.brainy-intro{display:flex;align-items:center;justify-content:space-between;gap:20px}
.brainy-intro>div{min-width:0}.brainy-intro>.brainy{width:128px;height:128px}
.brainy-empty{width:112px;height:112px;margin:0 auto 12px}
.brainy-empty-state{grid-column:1/-1;text-align:center}.brainy-empty-state p{margin:0}
.brainy-status{display:flex;align-items:center;gap:16px;padding:12px 16px;margin:0 0 20px;background:#20272c;border:1px solid #344047;border-radius:18px}
.brainy-status[hidden]{display:none}.brainy-status .brainy{width:76px;height:76px}.brainy-status p{margin:4px 0 0}
@media(max-width:600px){.brainy-intro{gap:10px}.brainy-intro>.brainy{width:84px;height:84px}.brainy-home{width:168px;height:168px}.brainy-status{gap:10px;padding:10px}.brainy-status .brainy{width:60px;height:60px}}
@media(max-height:720px){.brainy-home{width:136px;height:136px;margin-bottom:8px}}

/* Home sections keep their intrinsic height in compact Telegram windows. */
.home-page .content{overflow-y:auto;overflow-x:hidden;padding:8px 0 24px;scrollbar-width:thin}
.home-page .content> *{flex-shrink:0}
.home-page .hero{flex:0 0 auto;display:grid;grid-template-columns:100px minmax(0,1fr);align-items:center;gap:14px;padding:20px 20px 28px;text-align:left;min-height:auto}
.home-page .brainy-home{width:100px;height:116px;margin:0;object-fit:contain}
.home-page .hero-copy{min-width:0;overflow-wrap:anywhere}
.home-page .hero-title{font-size:24px;line-height:1.15;margin:0 0 8px}
.home-page .hero-subtitle{font-size:16px;line-height:1.4;margin:0}
.home-page .hero-model-count{font-size:13px;line-height:1.4;color:var(--text-3);margin-top:8px}
.home-page .hero-model-count:empty{display:none}
@media(max-width:350px){.home-page .hero{grid-template-columns:80px minmax(0,1fr);gap:10px;padding:16px 16px 24px}.home-page .brainy-home{width:80px;height:100px}.home-page .hero-title{font-size:22px}}

.home-page .hero-catalog-link{display:inline-flex;align-items:center;min-height:44px;padding:8px 0;color:#5FBDF2;text-decoration:none;font-size:14px;line-height:1.4}
.home-page .hero-catalog-link:hover{text-decoration:underline}
.home-page .hero-catalog-link:focus-visible{outline:2px solid var(--blue);outline-offset:3px;border-radius:4px}

/* The copy defines row height, including asynchronously loaded model counts.
   The portrait has no intrinsic row height and cannot push the text down. */
.home-page .hero{grid-template-columns:minmax(0,38%) minmax(0,1fr);align-items:stretch}
.brainy-portrait{position:relative;min-width:0;align-self:stretch;overflow:hidden}
.home-page .brainy-portrait>.brainy-home,.brainy-intro>.brainy-portrait>.brainy{position:absolute;inset:0;width:100%;height:100%;max-width:none;margin:0;object-fit:contain}
.home-page .hero-model-count{min-height:2.8em}
.home-page .hero-model-count:empty{display:block}
.brainy-intro{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,34%);align-items:stretch;gap:16px}
.brainy-intro>div:first-child>h1{margin-top:0}
.brainy-intro>div:first-child>p:last-child{margin-bottom:0}
@media(min-width:601px){.brainy-intro{grid-template-columns:minmax(0,1fr) 180px}}
@media(max-width:350px){.home-page .hero{grid-template-columns:minmax(0,35%) minmax(0,1fr);gap:10px}.brainy-intro{gap:12px;grid-template-columns:minmax(0,1fr) minmax(0,32%)}}