@font-face{font-family:SEMC;src:url(../assets/fonts/Sans-Serif_Latin-Regular.ttf);font-weight:400;font-display:swap}
@font-face{font-family:SEMC;src:url(../assets/fonts/Sans-Serif_Latin-Bold.ttf);font-weight:700;font-display:swap}
:root{--u:1.6px;--blk:-1px 0 0 #000,1px 0 0 #000,0 -1px 0 #000,0 1px 0 #000,0 0 3px #000;--acc:#ff8a2a;--hl:#2d6fd6;color-scheme:dark}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;height:100%;background:#000;overflow:hidden;overscroll-behavior:none}
body{color:#fff;font:calc(var(--u)*13)/1.2 SEMC,Roboto,Arial,sans-serif;user-select:none;-webkit-user-select:none;touch-action:manipulation}
#safe{position:fixed;padding:env(safe-area-inset-top,0) env(safe-area-inset-right,0) env(safe-area-inset-bottom,0) env(safe-area-inset-left,0);visibility:hidden;pointer-events:none}
#app{position:fixed;top:env(safe-area-inset-top,0);bottom:env(safe-area-inset-bottom,0);left:50%;transform:translateX(-50%);max-width:100vw;overflow:hidden;background:#000}
button:focus,button:focus-visible{outline:none}
button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer;text-align:inherit}
img{display:block}
.view{position:absolute;inset:0;overflow:hidden}
.view.in{animation:vin .26s ease-out}.view.in.back{animation:vback .26s ease-out}.view.outv{animation:vout .26s ease-in forwards;pointer-events:none}
@keyframes vin{from{opacity:0;transform:translateX(8%)}}@keyframes vback{from{opacity:0;transform:translateX(-8%)}}@keyframes vout{to{opacity:0}}
.sp{position:absolute;display:block}
button.sp:active{filter:brightness(1.5) sepia(.4) saturate(2) hue-rotate(-20deg)}

/* софт-клавиши: как xsoft G700, три подписи по низу */
.soft{position:absolute;left:0;right:0;bottom:0;height:calc(var(--u)*28);display:grid;grid-template-columns:repeat(3,1fr);z-index:20;background:linear-gradient(#0000,#000c 45%)}
.soft button{text-align:center;font-size:calc(var(--u)*13.5);font-weight:700;text-shadow:var(--blk);padding-top:calc(var(--u)*6)}
.soft button:active{color:var(--acc)}.soft button:disabled{opacity:0}
.toast{position:absolute;left:50%;bottom:calc(var(--u)*44);transform:translateX(-50%);max-width:88%;padding:calc(var(--u)*7) calc(var(--u)*12);border-radius:calc(var(--u)*5);background:linear-gradient(#e9eef5,#b9c4d2);color:#000;font-size:calc(var(--u)*12);text-align:center;z-index:60;box-shadow:0 4px 16px #0009;animation:tin .2s}
.toast.out{opacity:0;transition:opacity .3s}@keyframes tin{from{opacity:0;transform:translate(-50%,20%)}}

/* заставка */
#splash{position:absolute;inset:0;background:#000;z-index:99;display:grid;place-items:center;transition:opacity .45s}
#splash.out{opacity:0}
.splogo{width:50%;aspect-ratio:64/30;background:url(../assets/wm/pv.png) 82.82% 0/609.375% 1450% no-repeat;animation:pul 1.6s ease-in-out infinite}
@keyframes pul{50%{opacity:.5}}

/* медиацентр G700 */
.xmb{position:absolute;inset:0;background:radial-gradient(120% 60% at 75% 35%,#3a2a2d,#291c1e 55%,#160f10);overflow:hidden}
.xcv{position:absolute;left:0;top:0;width:100%;height:calc(100% + var(--u)*30)}
.xgrad{position:absolute;right:0;width:calc(var(--u)*120);height:calc(var(--u)*240);opacity:.62;pointer-events:none}
.xtop{position:absolute;left:0;right:0;top:0;height:calc(var(--u)*32);z-index:6}
.crumb{position:absolute;left:calc(var(--u)*8);top:calc(var(--u)*9);right:calc(var(--u)*52);font-size:calc(var(--u)*11);color:#fff9;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-shadow:var(--blk)}
.xhist{position:absolute;left:0;top:0;bottom:0;width:calc(var(--u)*40);transform:translateX(calc(var(--u)*-40));transition:transform .5s cubic-bezier(.4,0,1,1);z-index:2;background:linear-gradient(90deg,#0006,#0000)}
.xhist.on{transform:none}
.xhi{position:absolute;left:0;width:calc(var(--u)*40);height:calc(var(--u)*38);opacity:.8}
.xw{position:absolute;inset:0;touch-action:none}
.xlist{position:absolute;left:0;top:0;width:100%;z-index:3;transition:transform .2s linear}
.xr{position:absolute;left:calc(var(--u)*41);width:calc(var(--u)*199);height:calc(var(--u)*50);transition:opacity .2s linear,transform .5s cubic-bezier(.4,0,1,1)}
.xr img,.xr .ic{position:absolute;left:calc(var(--u)*5);top:calc(var(--u)*6);width:calc(var(--u)*40);height:calc(var(--u)*38);opacity:.45;transition:all .2s linear;object-fit:contain}
.xr .ic{width:calc(var(--u)*24);height:calc(var(--u)*24);left:calc(var(--u)*13);top:calc(var(--u)*13)}
.xr img.art{object-fit:cover;border-radius:calc(var(--u)*2);box-shadow:0 0 0 1px #fff3}
.xr b{position:absolute;left:calc(var(--u)*50);right:calc(var(--u)*4);top:calc(var(--u)*15);font-weight:700;font-size:calc(var(--u)*14);color:#aaa;opacity:.6;text-shadow:var(--blk);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;transition:top .2s linear}
.xr small{display:none}
.xr.sel img{left:0;top:0;width:calc(var(--u)*50);height:calc(var(--u)*50);opacity:1}
.xr.sel .ic{opacity:1;transform:scale(1.42)}
.xr.sel b{top:calc(var(--u)*3);color:#fff;opacity:1}
.xr.sel small{display:block;position:absolute;left:calc(var(--u)*50);right:calc(var(--u)*4);top:calc(var(--u)*27);font-size:calc(var(--u)*13);font-weight:700;color:#fff;text-shadow:var(--blk);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.xr.mk b{color:#9cf;opacity:1}.mkc{position:absolute;right:calc(var(--u)*6);top:calc(var(--u)*16);width:calc(var(--u)*14);height:calc(var(--u)*14);border-radius:50%;background:var(--acc);box-shadow:0 0 6px var(--acc)}
.xdiv{pointer-events:none;position:absolute;left:calc(var(--u)*91);width:calc(var(--u)*149);height:1px;background:linear-gradient(90deg,#fff 70%,#fff0);box-shadow:0 0 2px #fff6;z-index:3;transition:opacity .2s}
.xempty{position:absolute;left:calc(var(--u)*50);right:calc(var(--u)*10);font-size:calc(var(--u)*13);color:#ccc;text-shadow:var(--blk)}

/* плеер WALKMAN */
.pv{position:absolute;inset:0;background:#000;overflow:hidden}
.pvbg{position:absolute;left:0;top:0;width:100%}
.pvbg::after{content:'';position:absolute;left:0;right:0;bottom:0;height:30%;background:linear-gradient(#0000,#000)}
.pvc{position:absolute;left:0;top:0;width:100%;height:calc(100% - var(--u)*28);pointer-events:none}
.pvlogo{position:absolute;transition:left .5s cubic-bezier(.4,0,1,1),top .5s cubic-bezier(.4,0,1,1);z-index:2}
.pvart{position:absolute;z-index:3;transition:left .5s cubic-bezier(.4,0,1,1),top .5s cubic-bezier(.4,0,1,1),width .5s cubic-bezier(.4,0,1,1),height .5s cubic-bezier(.4,0,1,1);touch-action:pan-y}
.pvart i{position:absolute;inset:0;background-position:center;background-size:contain;background-repeat:no-repeat;transition:opacity .5s cubic-bezier(.4,0,1,1)}
.pv:not(.big) .pvart i[style*="url(\"blob"],.pv:not(.big) .pvart i[style*="covers"]{box-shadow:0 0 0 1px #fff4,0 4px 12px #000a}
.pvbox{position:absolute;inset:0;transition:transform .5s cubic-bezier(.4,0,1,1);pointer-events:none;z-index:4}
.pvbox>*{pointer-events:auto}
.pvn{position:absolute;height:calc(var(--u)*24);display:flex;align-items:baseline;justify-content:center;gap:1px;text-shadow:var(--blk)}
.pvn b{font-size:calc(var(--u)*16)}.pvn span{font-size:calc(var(--u)*14)}
.pvinfo{position:absolute;left:0;width:100%;height:calc(var(--u)*130);transition:transform .5s cubic-bezier(.4,0,1,1);z-index:3}
.pvprog{position:absolute;touch-action:none}
.pvprog i{position:absolute;left:0;display:block}.pvprog .pb{width:100%}.pvprog .pf{top:0;width:0}
.pvprog .pth,.pvprog .pmk{top:0}
.pvt{position:absolute;font-weight:700;font-size:calc(var(--u)*12);text-shadow:var(--blk)}.pvt.r{text-align:right}
.pvl{position:absolute;left:calc(var(--u)*30);width:calc(var(--u)*204);font-size:calc(var(--u)*15);line-height:calc(var(--u)*19);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-shadow:var(--blk);text-align:left}
.pvl.b{font-weight:700}
.pvctl{position:absolute;left:0;width:100%;height:calc(var(--u)*44);z-index:5}

/* лист снизу: меню, выбор, вопросы */
.sheetbg{position:absolute;inset:0;background:#0007;z-index:40;display:flex;align-items:flex-end;animation:fin .18s}
.sheetbg.out{opacity:0;transition:opacity .2s}@keyframes fin{from{opacity:0}}
.sheet{position:relative;width:100%;max-height:82%;display:flex;flex-direction:column;background:linear-gradient(#4b5260,#23262d 22%,#15171b);border-top:1px solid #8a93a5;border-radius:calc(var(--u)*7) calc(var(--u)*7) 0 0;box-shadow:0 -8px 30px #000a;padding-bottom:calc(var(--u)*28);animation:sup .22s cubic-bezier(.2,.8,.3,1)}
@keyframes sup{from{transform:translateY(40%)}}
.shh{display:flex;align-items:center;gap:calc(var(--u)*6);padding:calc(var(--u)*7) calc(var(--u)*10);font-size:calc(var(--u)*13);border-bottom:1px solid #fff2;color:#9cd2ff}
.shb{font-size:calc(var(--u)*20);line-height:1;width:calc(var(--u)*20);color:#fff}
.shc{overflow-y:auto;padding:calc(var(--u)*3) 0;overscroll-behavior:contain}
.sheet .soft{background:none}
.mi{display:flex;align-items:center;gap:calc(var(--u)*8);width:100%;min-height:calc(var(--u)*27);padding:0 calc(var(--u)*12);font-size:calc(var(--u)*13.5)}
.mi span{flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mi.hl{background:linear-gradient(#5aa0ff,#2d6fd6 60%,#1e57b5);box-shadow:inset 0 1px #ffffff60;text-shadow:0 1px #0006}
.mi.dim{opacity:.4}.mi .ar{font-size:calc(var(--u)*18);opacity:.8}
.msep{display:block;height:1px;margin:calc(var(--u)*3) calc(var(--u)*10);background:#fff2}
.mic{display:inline-block;flex:none;width:calc(var(--u)*24);height:calc(var(--u)*24)}
.ck{flex:none;width:calc(var(--u)*15);height:calc(var(--u)*15);border:1px solid #cfd6e2;border-radius:calc(var(--u)*2);background:#0006;position:relative}
.ck.on::after{content:'';position:absolute;left:28%;top:6%;width:30%;height:58%;border:solid #fff;border-width:0 3px 3px 0;transform:rotate(40deg)}
.rb{flex:none;width:calc(var(--u)*14);height:calc(var(--u)*14);border:1px solid #cfd6e2;border-radius:50%;position:relative}
.rb.on::after{content:'';position:absolute;inset:22%;border-radius:50%;background:#fff}
.msg{padding:calc(var(--u)*10) calc(var(--u)*12);font-size:calc(var(--u)*13);line-height:1.35;text-align:center}
.msg.left{text-align:left}.msg p{margin:0 0 .7em}.msg.small{font-size:calc(var(--u)*11);color:#fffa}
.upd .anim{width:calc(var(--u)*56);height:calc(var(--u)*56);margin:0 auto calc(var(--u)*6);background-size:1200% 100%;animation:sweep 1s steps(11) infinite}
@keyframes sweep{to{background-position:100% 0}}
.bar{height:calc(var(--u)*6);margin:calc(var(--u)*8) 0 calc(var(--u)*4);background:#000;border:1px solid #fff4;border-radius:3px;overflow:hidden}.bar i{display:block;height:100%;background:linear-gradient(90deg,#ff8a2a,#ffc06a);transition:width .3s}
.upd small{display:block;font-size:calc(var(--u)*10);color:#fff8;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.fl{display:block;padding:calc(var(--u)*10) calc(var(--u)*12)}.fl span{display:block;font-size:calc(var(--u)*12);margin-bottom:calc(var(--u)*4);color:#ccc}
.fl input{width:100%;font:inherit;font-size:16px;padding:calc(var(--u)*6);background:#fff;color:#000;border:2px solid #2d6fd6;border-radius:calc(var(--u)*2);user-select:text}

/* страницы и диалоги в стиле окна UIQ */
.pg{position:absolute;inset:0;background:linear-gradient(#1d2129,#0b0c0f);display:flex;flex-direction:column}
.pgt{position:relative;flex:none;height:calc(var(--u)*34);display:flex;align-items:center;gap:calc(var(--u)*6);padding:0 calc(var(--u)*52) 0 calc(var(--u)*4);background:linear-gradient(#5d6577,#2b303b);border-bottom:1px solid #000;box-shadow:inset 0 1px #fff3;font-size:calc(var(--u)*14);font-weight:700;text-shadow:var(--blk)}
.pgt img{width:calc(var(--u)*30);height:calc(var(--u)*28);object-fit:contain}.pgt b{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pgt .sp{top:calc(var(--u)*5)!important}
.pgb{flex:1;overflow-y:auto;padding-bottom:calc(var(--u)*34);overscroll-behavior:contain}
.tabs{display:flex;flex:none;border-bottom:1px solid #fff2;background:#0004}
.tabs button{flex:1;padding:calc(var(--u)*7) 0;text-align:center;font-size:calc(var(--u)*12);color:#fff9;border-bottom:2px solid transparent}
.tabs button.on{color:#fff;border-color:var(--acc);font-weight:700}
.fr{display:block;width:100%;padding:calc(var(--u)*6) calc(var(--u)*10);border-bottom:1px solid #fff1;min-height:calc(var(--u)*30)}
.fr.hl{background:linear-gradient(#5aa0ff44,#2d6fd633);box-shadow:inset 3px 0 #5aa0ff}
.fr>.ck{display:inline-block;vertical-align:middle;margin-right:calc(var(--u)*8)}.fr>span{vertical-align:middle}
.fr small{display:block;font-size:calc(var(--u)*11);color:#fffa;margin-bottom:calc(var(--u)*3)}
.chl{display:flex;justify-content:space-between;align-items:center;padding:calc(var(--u)*3) calc(var(--u)*6);background:#fff;color:#000;border-radius:calc(var(--u)*2);font-size:calc(var(--u)*12.5)}
.chl::after{content:'▾';color:#2d6fd6}
.kv{display:grid;grid-template-columns:auto 1fr;gap:calc(var(--u)*5) calc(var(--u)*8);margin:0;padding:calc(var(--u)*10);font-size:calc(var(--u)*12.5)}
.kv dt{color:#fff9}.kv dd{margin:0;word-break:break-word}
.iart{width:calc(var(--u)*96);height:calc(var(--u)*96);object-fit:cover;margin:calc(var(--u)*10) auto 0;box-shadow:0 4px 14px #000}
.bigart{width:100%;height:auto;margin-top:calc(var(--u)*10)}
.li{display:flex;align-items:center;gap:calc(var(--u)*8);width:100%;padding:calc(var(--u)*4) calc(var(--u)*8);border-bottom:1px solid #fff1;display:grid;grid-template-columns:auto 1fr;grid-template-rows:auto auto}
.li .lart{grid-row:span 2;width:calc(var(--u)*34);height:calc(var(--u)*34);object-fit:cover}
.li b{font-size:calc(var(--u)*13);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.li small{font-size:calc(var(--u)*11);color:#fff9}
.li.hl{background:linear-gradient(#5aa0ff,#2d6fd6 60%,#1e57b5)}.li.hl small{color:#fffc}
.eq{display:flex;justify-content:space-around;padding:calc(var(--u)*12) calc(var(--u)*8)}
.eqb{display:flex;flex-direction:column;align-items:center;gap:calc(var(--u)*4);font-size:calc(var(--u)*11)}
.eqt{width:calc(var(--u)*18);height:calc(var(--u)*120);background:#000;border:1px solid #fff3;border-radius:3px;display:flex;align-items:flex-end;overflow:hidden}
.eqt i{display:block;width:100%;background:linear-gradient(#ffc06a,#ff8a2a);transition:height .2s}
.eqb.on .eqt{border-color:#5aa0ff;box-shadow:0 0 8px #5aa0ff}.eqb b{font-size:calc(var(--u)*11)}
.eqm{display:flex;justify-content:center;gap:calc(var(--u)*24)}.eqm button{width:calc(var(--u)*40);height:calc(var(--u)*30);border-radius:calc(var(--u)*4);background:linear-gradient(#5a6170,#2a2e36);text-align:center;font-size:calc(var(--u)*18)}

/* фото и видео */
.grid{display:grid;grid-template-columns:repeat(3,1fr);gap:calc(var(--u)*4);padding:calc(var(--u)*6)}
.gi{aspect-ratio:1;background:#222 center/cover no-repeat;border-radius:calc(var(--u)*2);transition:transform .2s,box-shadow .2s}
.gi.hl{transform:scale(1.06);box-shadow:0 0 0 2px #fff,0 4px 12px #000;z-index:2;position:relative}
.vw,.vp{position:absolute;inset:0;background:#000}
.vst{position:absolute;inset:0;touch-action:pan-y}.vst img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain}
.vtt{position:absolute;left:calc(var(--u)*6);top:calc(var(--u)*6);right:calc(var(--u)*52);font-weight:700;font-size:calc(var(--u)*14);text-shadow:var(--blk);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;transition:opacity .3s}
.vw.bare .vtt,.vw.bare .sp,.vw.bare~.soft{opacity:0}
.vp video{position:absolute;left:0;right:0;top:calc(var(--u)*34);width:100%;max-height:calc(100% - var(--u)*120);background:#000}
.vbar{position:absolute;left:calc(var(--u)*6);right:calc(var(--u)*6);bottom:calc(var(--u)*80);height:calc(var(--u)*10);background:#fff2;border-radius:3px;overflow:hidden}.vbar i{display:block;height:100%;width:0;background:linear-gradient(90deg,#ff8a2a,#ffc06a)}
.vp .pvctl{top:auto}
@media (prefers-reduced-motion:reduce){*{transition-duration:.01ms!important;animation-duration:.01ms!important}}
.pvart i.noaa{inset:auto;left:50%;top:50%;transform:translate(-50%,-50%)}