@font-face{font-family:Archivo;src:url(../fonts/archivo-latin-ext.woff2) format('woff2');font-weight:100 900;font-stretch:62% 125%;font-display:swap;unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C4,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:Archivo;src:url(../fonts/archivo-latin.woff2) format('woff2');font-weight:100 900;font-stretch:62% 125%;font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Geist Mono';src:url(../fonts/geistmono-latin-ext.woff2) format('woff2');font-weight:400 500;font-display:swap;unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C4,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Geist Mono';src:url(../fonts/geistmono-latin.woff2) format('woff2');font-weight:400 500;font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}

:root{
  --ink:#0a0a0a;--paper:#ececec;--mute:#8c8c8c;--line:#2a2a2a;--card:#131313;
  --rmute:#555;--rline:#c4c4c4;
  --px:16px;--col:640px;--bar:64px;
  --sans:Archivo,system-ui,sans-serif;--mono:'Geist Mono',ui-monospace,monospace;
  --ease:cubic-bezier(.77,0,.18,1);
}
*{box-sizing:border-box}
html{background:var(--ink);color-scheme:dark;scrollbar-gutter:stable}
body{margin:0;min-height:100dvh;background:var(--ink);color:var(--paper);font:400 1rem/1.5 var(--sans);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
html.is-reading{overflow:hidden}
a{color:inherit}
button{font:inherit;color:inherit;border-radius:0}
::selection{background:var(--paper);color:var(--ink)}
:focus-visible{outline:2px solid currentColor;outline-offset:3px}
.sprite{position:absolute;width:0;height:0;overflow:hidden}
.nojs{padding:var(--px);font:500 .875rem var(--mono)}

/* glif: bir xil qalinlik, to'g'ri uchlar, burchaklar o'tkir */
.g{--s:64px;--sw:1.3;width:var(--s);height:var(--s);flex:none;fill:none;stroke:currentColor;stroke-width:var(--sw);stroke-linecap:square;stroke-linejoin:miter;stroke-miterlimit:10}
.g--s{--s:16px;--sw:4.2}
.g--l{--s:clamp(96px,12vw,168px);--sw:.7}

/* kanal ustuni */
.app{max-width:var(--col);min-height:100dvh;margin:0 auto;display:flex;flex-direction:column;border-inline:1px solid var(--line)}
.bar{position:sticky;top:0;z-index:30;height:var(--bar);flex:none;display:flex;align-items:center;justify-content:space-between;gap:16px;padding-inline:var(--px);background:var(--ink);border-bottom:1px solid var(--line)}
.chan{display:flex;align-items:center;gap:12px;height:100%;padding:0;background:none;border:0;text-align:left;cursor:pointer}
.ava{display:grid;place-items:center;width:40px;height:40px;background:var(--paper);color:var(--ink)}
.ava .g{--s:26px;--sw:2.6}
.chan__t b{display:block;font-weight:900;font-stretch:125%;font-size:1rem;line-height:1.1;letter-spacing:.14em}
.chan__t small{display:block;margin-top:4px;font:500 .6875rem/1 var(--mono);text-transform:uppercase;letter-spacing:.1em;color:var(--mute)}
.home{padding:12px 0 12px 12px;font:500 .6875rem/1 var(--mono);text-transform:uppercase;letter-spacing:.1em;color:var(--mute);text-decoration:none}

.chat{flex:1;display:flex;flex-direction:column}

/* kanal boshi */
.intro{container-type:inline-size;margin:var(--px);padding:20px;border:1px solid var(--line);overflow:hidden}
.intro__who{margin:0;font:500 .75rem/1.4 var(--mono);text-transform:uppercase;letter-spacing:.14em;color:var(--mute)}
.intro__lead{margin:12px 0 0;max-width:32ch;font-size:1.0625rem;line-height:1.45}
.intro__mark{margin:28px 0 -.06em -.04em;font-weight:900;font-stretch:125%;font-size:clamp(3rem,18vw,6.5rem);font-size:23cqw;line-height:.8;letter-spacing:-.035em;white-space:nowrap;user-select:none}

/* lenta: eng yangisi pastda */
.feed{margin-top:auto;padding:0 12px 16px}
.day__h{position:sticky;top:calc(var(--bar) + 8px);z-index:5;width:fit-content;margin:16px auto 12px;padding:7px 12px;background:var(--paper);color:var(--ink);font:500 .6875rem/1 var(--mono);text-transform:uppercase;letter-spacing:.1em}

.msg{margin:0 0 8px;background:var(--card);border:1px solid var(--line);animation:rise .6s var(--ease) both;animation-delay:calc(var(--i)*60ms)}
.msg__b{padding:14px 16px 10px}
.msg__k{display:flex;align-items:center;gap:8px;margin:0 0 10px;font:500 .6875rem/1 var(--mono);text-transform:uppercase;letter-spacing:.1em;color:var(--mute)}
.msg h3{margin:0 0 8px;font-weight:800;font-stretch:112%;font-size:1.375rem;line-height:1.1;letter-spacing:-.015em;text-wrap:balance}
.msg p{margin:0 0 .6em;max-width:60ch;line-height:1.55;overflow-wrap:anywhere}
.more{display:inline-flex;align-items:center;gap:10px;height:36px;margin:6px 0 2px;padding:0 12px;background:var(--paper);color:var(--ink);font:500 .75rem/1 var(--mono);text-transform:uppercase;letter-spacing:.08em;text-decoration:none}
.msg__f{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-top:8px;font:500 .6875rem/1 var(--mono);letter-spacing:.06em;color:var(--mute)}
.msg__f time{margin-left:auto}

/* rasm va video: lentada oq-qora, rang faqat o'qish oynasida */
.pic{position:relative;display:block;overflow:hidden;background:#1a1a1a}
.pic img,.msg video{display:block;width:100%;height:auto;filter:grayscale(1) contrast(1.15) brightness(.92)}
.msg video{background:#000}
.album{display:grid;grid-template-columns:1fr 1fr;gap:2px}
.album .pic{aspect-ratio:1}
.album .pic img{position:absolute;inset:0;height:100%;object-fit:cover}
.album--3 .pic:first-child{grid-column:1/-1;aspect-ratio:16/10}
.pic[data-more]::after{content:attr(data-more);position:absolute;inset:0;display:grid;place-items:center;background:rgba(10,10,10,.7);font:500 1.25rem/1 var(--mono)}
@keyframes rise{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:none}}

.sk{height:150px;margin:0 0 8px;background:var(--card);border:1px solid var(--line);animation:pulse 1.4s ease-in-out infinite alternate}
.sk:nth-child(2){height:96px;animation-delay:.2s}.sk:nth-child(3){height:220px;animation-delay:.4s}
@keyframes pulse{from{opacity:.3}to{opacity:.8}}
.svc{width:fit-content;max-width:92%;margin:48px auto;padding:10px 14px;border:1px solid var(--line);font:500 .75rem/1.4 var(--mono);text-transform:uppercase;letter-spacing:.08em;color:var(--mute);text-align:center}

/* pastki panel: turlar */
.dock{position:sticky;bottom:0;z-index:30;flex:none;background:var(--ink);border-top:1px solid var(--line)}
.filters{display:grid;grid-template-columns:repeat(5,1fr)}
.filter{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;height:58px;padding:0;background:none;border:0;color:var(--mute);font:500 .6875rem/1 var(--mono);text-transform:uppercase;letter-spacing:.08em;cursor:pointer;transition:color .2s,transform .15s}
.filter .g{--s:20px;--sw:3.4}
.filter:hover{color:var(--paper)}
.filter:active{transform:scale(.96)}
.filter[aria-pressed=true]{background:var(--paper);color:var(--ink)}
.down{position:absolute;right:var(--px);bottom:calc(100% + 14px);display:grid;place-items:center;width:44px;height:44px;padding:0;background:var(--paper);color:var(--ink);border:0;cursor:pointer;animation:rise .3s var(--ease) both;transition:transform .15s}
.down[hidden]{display:none}
.down:active{transform:scale(.94)}
.down .g{--s:22px;--sw:3.4}

/* linza: oq kvadrat, faqat tugma/rasm chegarasiga kirganda o'sadi, ostidagini teskari qiladi */
.lens{position:fixed;left:0;top:0;z-index:60;width:100px;height:100px;background:#fff;mix-blend-mode:difference;pointer-events:none;transform:scale(0);will-change:transform}

/* o'qish oynasi: teskari (oq) dunyo, rang faqat shu yerda */
.reader{position:fixed;inset:0;z-index:40;overflow-y:auto;overscroll-behavior:contain;background:var(--paper);color:var(--ink);clip-path:var(--from,inset(50%));transition:clip-path .85s var(--ease);will-change:clip-path}
.reader[hidden]{display:none}
.reader.on{clip-path:inset(0)}
.reader ::selection{background:var(--ink);color:var(--paper)}
.reader>*{opacity:0;transform:translateY(14px)}
.reader.on>*{opacity:1;transform:none;transition:opacity .5s .4s,transform .6s .4s var(--ease)}
.rbar{position:sticky;top:0;z-index:2;height:var(--bar);display:flex;align-items:center;justify-content:space-between;gap:16px;padding-inline:var(--px);background:var(--paper);border-bottom:1px solid var(--rline)}
.meta{display:flex;flex-wrap:wrap;align-items:center;gap:6px 14px;font:500 .75rem/1 var(--mono);text-transform:uppercase;letter-spacing:.1em;color:var(--mute)}
.meta span{display:inline-flex;align-items:center;gap:6px}
.rbar .meta{display:inline-flex;align-items:center;gap:8px;color:var(--rmute)}
.x{display:inline-flex;align-items:center;gap:8px;height:40px;padding:0 12px;background:var(--ink);color:var(--paper);font:500 .75rem/1 var(--mono);text-transform:uppercase;letter-spacing:.08em;text-decoration:none;transition:transform .15s}
.x:active{transform:scale(.96)}
.rbody{display:grid;grid-template-columns:repeat(12,1fr);column-gap:16px;max-width:1400px;margin:0 auto;padding:clamp(24px,5vw,72px) clamp(16px,4vw,48px) 128px}
.rside{grid-column:1/4;align-self:start;position:sticky;top:calc(var(--bar) + 32px);display:flex;flex-direction:column;gap:20px}
.rside .meta{flex-direction:column;align-items:flex-start;color:var(--rmute)}
.rmain{grid-column:4/12;min-width:0}
.rmain h1{margin:0 0 .5em;font-weight:900;font-stretch:118%;font-size:clamp(2rem,5.5vw,5rem);line-height:1;letter-spacing:-.03em;text-wrap:balance}
.rmain p{margin:0 0 1.2em;max-width:60ch;font-size:clamp(1.0625rem,1.3vw,1.25rem);line-height:1.7}
.rmain figure{margin:2.5rem 0 0}
.rmain img,.rmain video{display:block;width:100%;height:auto;background:#d8d8d8}
@media (max-width:860px){
  .rside{grid-column:1/-1;position:static;flex-direction:row;align-items:flex-end;justify-content:space-between;margin-bottom:32px}
  .rside .g--l{--s:88px;--sw:1.4}
  .rmain{grid-column:1/-1}
}

@media (max-width:640px){
  .app{border-inline:0}
}
@media (max-width:380px){
  .home{display:none}
  .filter{letter-spacing:.04em}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
}