:root{
--д-отклик:150ms;
--к-отклик:cubic-bezier(0.33, 1, 0.68, 1);
--п-ровная:linear(0.0000,0.0560,0.1177,0.1822,0.2473,0.3112,0.3730,0.4317,0.4870,0.5385,0.5861,0.6298,0.6697,0.7060,0.7388,0.7685,0.7951,0.8189,0.8402,0.8592,0.8761,0.8911,0.9044,0.9161,0.9265,0.9357,0.9437,0.9545,0.9686,0.9790,0.9866,0.9919,0.9955,0.9978,0.9991,0.9998,1.0000);
--п-ровная-т:280ms;
}
:root{
--bg:#FFFFFF; --fg:#0A0A0A; --dim:#6E6E73;
--line:#E2E2E0; --fill:#F2F2F0; --fill-hi:#E8E8E5; --red:#9E1B2A;
--r:0px; --bar:92px;
--col:min(1100px, 100vw - 32px);
}
*{box-sizing:border-box;margin:0;padding:0;}
html{-webkit-text-size-adjust:100%;
-webkit-tap-highlight-color:transparent;}
a,button{touch-action:manipulation;}
.pl-btn,.round{-webkit-touch-callout:none;-webkit-user-select:none;user-select:none;}
html,body{overflow-x:clip;}
body{
min-height:100dvh;background:var(--bg);color:var(--fg);
font-family:'Inter',system-ui,-apple-system,sans-serif;
font-feature-settings:'tnum' 0;
padding:calc(env(safe-area-inset-top) + 24px) 16px
calc(env(safe-area-inset-bottom) + 24px);
}
body.has-player{padding-bottom:calc(env(safe-area-inset-bottom) + var(--bar) + 28px);}
a{color:inherit;text-decoration:none;}
button{font:inherit;color:inherit;background:none;border:none;cursor:pointer;}
:focus-visible{outline:2px solid var(--red);outline-offset:3px;}
.panel{width:100%;max-width:1100px;margin:0 auto;}
.mono{font-size:10px;font-weight:500;letter-spacing:0.18em;text-transform:uppercase;color:var(--dim);}
.cap{font-size:10px;font-weight:500;letter-spacing:0.18em;
text-transform:uppercase;color:var(--dim);}
.big{font-weight:600;font-size:22px;letter-spacing:-0.025em;line-height:1.1;}
.head{display:block;padding:0;}
.head .logo{width:84px;height:30px;display:block;color:var(--fg);margin-bottom:8px;}
.title{font-weight:600;line-height:0.92;letter-spacing:-0.05em;
font-size:calc(var(--col) / 5.44);white-space:nowrap;}
.edges{display:flex;justify-content:space-between;align-items:baseline;
padding:24px 0 0;}
.edges a{color:var(--fg);font-weight:600;letter-spacing:-0.035em;line-height:1;
font-size:clamp(22px,4.2vw,40px);
border-bottom:2px solid var(--fg);padding-bottom:2px;
transition:opacity var(--д-отклик) var(--к-отклик);}
.top{display:flex;flex-direction:column;align-items:flex-start;gap:8px;padding:0 0 24px;}
.top-row{display:flex;align-items:baseline;justify-content:space-between;
gap:24px;width:100%;}
.top .logo{width:84px;height:30px;flex:none;display:block;color:var(--fg);}
.top .name{font-weight:600;font-size:21px;letter-spacing:-0.03em;}
.top h1{font-weight:600;letter-spacing:-0.05em;line-height:0.84;
font-size:clamp(40px,11vw,120px);white-space:nowrap;}
.back{display:inline-flex;align-items:center;gap:7px;height:20px;
font-size:10px;font-weight:500;letter-spacing:0.18em;text-transform:uppercase;
color:var(--dim);background:none;transition:color var(--д-отклик) var(--к-отклик);}
.now-row{display:flex;align-items:center;gap:32px;cursor:pointer;
border-top:1px solid var(--fg);
padding:24px 0;margin-top:32px;}
.now-row .txt{flex:0 1 auto;min-width:0;}
.now-row .t{font-weight:600;letter-spacing:-0.04em;line-height:1.06;
font-size:clamp(30px,7.6vw,72px);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
padding-bottom:0.1em;}
.round{flex:none;width:auto;height:auto;background:none;color:var(--fg);
display:flex;align-items:center;justify-content:center;
padding:10px;margin:-10px;
transition:opacity var(--д-отклик) var(--к-отклик);}
.round:disabled{opacity:.25;cursor:default;}
.round svg{display:block;}
.banner{position:relative;margin-top:32px;}
.banner .strip{position:relative;background:#000;color:#fff;
min-height:clamp(150px,26vw,250px);display:flex;align-items:flex-end;
padding:24px;transition:background var(--д-отклик) var(--к-отклик);}
.banner .name-sec{position:relative;z-index:3;font-weight:600;
font-size:clamp(25px,5.6vw,52px);letter-spacing:-0.035em;white-space:nowrap;
text-shadow:0 0 2px #000, 0 0 5px #000, 0 0 11px #000, 0 0 22px rgba(0,0,0,0.9);}
.banner .name-sec .sec-dim{color:#8A8D91;}
.banner .arrow{position:absolute;top:24px;right:24px;z-index:3;color:rgba(255,255,255,0.55);}
.orb{position:absolute;z-index:2;pointer-events:none;
mix-blend-mode:difference;
will-change:transform;transform:translateZ(0);backface-visibility:hidden;}
.links-row{display:flex;justify-content:space-between;align-items:baseline;gap:24px;
border-top:1px solid var(--line);margin-top:32px;padding:24px 0 0;}
.links{display:flex;flex-wrap:wrap;gap:24px;}
.link{display:flex;align-items:center;gap:9px;font-size:14px;font-weight:500;
transition:color var(--д-отклик) var(--к-отклик);}
.link svg{flex:none;}
.foot{display:flex;justify-content:space-between;padding:48px 0 0;}
.feed{display:flex;flex-direction:column;border-top:1px solid var(--fg);}
.post{display:flex;align-items:center;gap:16px;background:none;cursor:pointer;
border-bottom:1px solid var(--line);padding:24px 0;
transition:opacity var(--д-отклик) var(--к-отклик);}
.post.on .title{text-decoration:underline;text-underline-offset:6px;}
.post .body{flex:1;min-width:0;}
.post .title{font-weight:600;letter-spacing:-0.04em;line-height:1.06;
font-size:clamp(26px,6.4vw,56px);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
padding-bottom:0.1em;}
.empty{color:var(--dim);padding:48px 0;font-size:14px;}
@media (max-width:700px){
.banner .strip{padding:18px;}
.banner .arrow{top:18px;right:18px;}
.links-row{flex-direction:column;gap:14px;}
}
.player{
position:fixed;left:0;right:0;bottom:0;z-index:40;
padding:0 16px calc(env(safe-area-inset-bottom) + 12px);
transform:translateY(130%);transition:transform var(--п-ровная-т) var(--п-ровная);
pointer-events:none;
}
.player.up{transform:translateY(0);}
.player-in{
width:100%;max-width:1100px;margin:0 auto;pointer-events:auto;
background:var(--fill);border:1px solid var(--line);
padding:13px 14px 11px;
}
.pl-row{display:flex;align-items:center;gap:13px;}
.pl-txt{flex:1;min-width:0;}
.pl-title{font-weight:600;font-size:16px;
letter-spacing:-0.025em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.pl-ctl{display:flex;align-items:center;gap:4px;flex:none;}
.pl-btn{width:38px;height:38px;display:flex;align-items:center;
justify-content:center;color:var(--fg);transition:background var(--д-отклик) var(--к-отклик),opacity var(--д-отклик) var(--к-отклик);}
.pl-btn:disabled{opacity:.3;cursor:default;background:none;}
.pl-btn.main{width:46px;height:46px;color:var(--fg);}
.pl-btn svg{display:block;}
.pl-bar{display:flex;align-items:center;gap:10px;margin-top:9px;}
.pl-time{font-size:10.5px;font-weight:500;color:var(--dim);
flex:none;width:36px;font-variant-numeric:tabular-nums;letter-spacing:0.02em;}
.pl-time.r{text-align:right;}
.pl-track{
position:relative;flex:1;height:18px;display:flex;align-items:center;
cursor:pointer;touch-action:none;
}
.pl-rail{position:relative;width:100%;height:3px;background:#BDBDB9;overflow:hidden;
transform-origin:center;transition:transform var(--д-отклик) var(--к-отклик);}
.pl-buf,.pl-fill{position:absolute;left:0;top:0;bottom:0;width:100%;
transform:scaleX(0);transform-origin:left center;}
.pl-buf{background:#8E8E8A;}
.pl-fill{background:var(--fg);}
.pl-track.drag .pl-fill,.pl-track.drag .pl-buf{transition:none;}
@media (prefers-reduced-motion: reduce){
.player,.pl-rail{transition:none;}
}
@media (max-width:420px){
.pl-ctl .pl-btn:not(.main){display:none;}
.player-in{padding:11px 12px 9px;}
}
@media (hover: hover) and (pointer: fine){
.edges a:hover{opacity:.5;}
.back:hover{color:var(--fg);}
.round:hover{opacity:.55;}
.banner .strip:hover{background:#0E0E0E;}
.banner:hover .arrow{color:#fff;}
.link:hover{color:var(--red);}
.post:hover{opacity:.55;}
.pl-btn:hover{background:var(--fill-hi);}
.pl-btn.main:hover{background:none;opacity:.55;}
.pl-track:hover .pl-rail{transform:scaleY(1.6667);}
}
.pl-track.drag .pl-rail{transform:scaleY(1.6667);}
.edges a:active{opacity:.5;}
.back:active{color:var(--fg);}
.round:active{opacity:.55;}
.banner .strip:active{background:#0E0E0E;}
.link:active{color:var(--red);}
.post:active{opacity:.55;}
.pl-btn:active{background:var(--fill-hi);}
.pl-btn.main:active{background:none;opacity:.55;}