.brand-mark {overflow:hidden;padding:0;flex-shrink:0}
.brand-mark img {width:100%;height:100%;object-fit:cover;display:block;filter:grayscale(1)}
.lang-switch {display:grid;grid-template-columns:repeat(2,38px);gap:0;padding:3px;height:34px;box-sizing:border-box}
.lang-switch .lang-btn {display:grid;place-items:center;width:38px;height:26px;padding:0;border-radius:99px;line-height:1;letter-spacing:.1em;transition:background .2s,color .2s}
.lang-switch .lang-pill,.lang-switch .lang-sep {display:none}
html[data-lang="ru"] .lang-switch .lang-btn[data-lang-set="ru"],html[data-lang="en"] .lang-switch .lang-btn[data-lang-set="en"] {background:#f5f5f3;color:#050505}
.feature-icon,.contact-icon,.project-arrow,.contact-action,.mini-icon,.mini-btn,.round-btn,.ghost-btn {display:inline-flex;align-items:center;justify-content:center;line-height:1;flex-shrink:0}
.ico {display:block;flex-shrink:0}
.stat-row {grid-template-columns:repeat(4,minmax(0,1fr))}
.stat b {font-size:clamp(15px,1.6vw,24px)}
@media(max-width:640px){.lang-switch{height:32px}.lang-switch .lang-btn{height:24px}.stat-row{grid-template-columns:repeat(2,minmax(0,1fr))}}
#nativeVideo{width:100%;height:100%;object-fit:cover;pointer-events:none}
.video-frame{filter:brightness(.7) contrast(1.05) blur(var(--video-blur))}
.video-monochrome .video-frame{filter:grayscale(1) brightness(.7) contrast(1.05) blur(var(--video-blur))}
.mode-controls{display:flex;align-items:center;justify-content:center;gap:7px;margin-left:2px;flex-wrap:nowrap}
.mode-controls{position:relative}
.mode-menu{position:absolute;bottom:calc(100% + 12px);right:0;z-index:30;display:flex;padding:6px;border:1px solid #ffffff30;border-radius:9px;background:#111;box-shadow:0 8px 30px #0008;gap:3px}
.mode-menu button{padding:8px;font:10px var(--mono);white-space:nowrap;border-radius:5px}.mode-menu button:hover{background:#fff;color:#000}
.seek.is-unseekable{cursor:default}
.mode-control,.mode-button{position:relative;display:inline-flex;align-items:center;justify-content:center;width:27px;height:27px;padding:0;border:1px solid transparent;border-radius:50%;background:transparent;color:var(--muted);font:inherit;cursor:pointer}
.mode-control:hover,.mode-button:hover,.mode-button[aria-pressed="true"]{color:var(--ink);border-color:var(--line-strong);background:rgba(255,255,255,.06)}
.mode-control .ico,.mode-button .ico{width:13px;height:13px}
.mode-control select{position:absolute;inset:0;width:100%;opacity:0;cursor:pointer}
.mode-controls [hidden]{display:none!important}
.dock{height:var(--dock-h);flex-shrink:0;transition:transform .8s cubic-bezier(.22,.61,.36,1),opacity .6s ease;will-change:transform}
.relax-brand{opacity:0;visibility:hidden;position:fixed;top:24px;left:50%;transform:translate(-50%,-10px);z-index:6;font:9px var(--mono);letter-spacing:.55em;text-transform:uppercase;color:#fff;transition:opacity .6s cubic-bezier(.25,.8,.25,1),transform .7s cubic-bezier(.22,1,.36,1),visibility .6s}
.ui-ready .topbar,.ui-ready .stage{transition:opacity .6s ease,transform .7s cubic-bezier(.22,1,.36,1),visibility 0s;opacity:1}
body.ui-ready .dock,body.ui-ready .panel,body.ui-ready .identity>*,body.ui-ready .topbar{animation:none}
.relax-mode.entered .topbar,.relax-mode.entered .stage{visibility:hidden;opacity:0;transform:translateY(-16px);pointer-events:none;transition:opacity .6s ease,transform .7s cubic-bezier(.22,1,.36,1),visibility 0s .7s}
.relax-mode.entered .relax-brand{opacity:1;visibility:visible;transform:translate(-50%,0)}
.relax-mode .video-grade,.relax-mode .video-vignette{opacity:.35}
.relax-mode .video-frame{filter:blur(var(--video-blur))}
.relax-mode.video-monochrome .video-frame{filter:grayscale(1) blur(var(--video-blur))}
.auto-hide.entered.ui-ready:not(.dock-revealed) .dock{transform:translateY(calc(100% + 36px));opacity:0;pointer-events:none}
#dockEdge{position:fixed;bottom:0;left:0;width:100%;height:28px;background:transparent;border:0;z-index:9;display:none}
.auto-hide.entered #dockEdge{display:block}
.dock-revealed #dockEdge{pointer-events:none}
#equalizerCanvas{position:absolute;inset:0;pointer-events:none;z-index:1;width:100%;height:100%}
#equalizerCanvas[hidden]{display:none}
.relax-mode #equalizerCanvas:not([hidden]){display:block}
#bootStatus{color:#bbb;text-align:center;font-size:12px;min-height:18px;position:absolute;top:67%;left:0;right:0}
.music-busy #boot{cursor:default}.enter:disabled{opacity:.35;cursor:not-allowed}
.seek-time{display:block;left:clamp(50px,var(--seek-position,50%),calc(100% - 50px))!important}.seek-clock{position:absolute;right:12px;top:-4px;font:9px var(--mono);color:#bbb;pointer-events:none;font-variant-numeric:tabular-nums;white-space:nowrap;width:max-content;line-height:1}
.seek-fill{background:#fff;z-index:2}.seek-buffer{background:#ffffff20;z-index:1}
.seek{background:#ffffff12}.eq i{animation:none!important}
@media(max-width:640px){.mode-controls{gap:4px;flex-wrap:nowrap;justify-content:center}.mode-control,.mode-button{width:25px;height:25px}.dock-inner{padding-top:12px}}
.video-frame,.video-monochrome .video-frame,.relax-mode .video-frame,.relax-mode.video-monochrome .video-frame{filter:none;will-change:auto}
#nativeVideo{filter:blur(var(--video-blur-px,0px));transition:filter .65s ease}
.video-monochrome #nativeVideo{filter:grayscale(1) blur(var(--video-blur-px,0px))}
#ytPlayer{filter:blur(var(--video-blur-px,0px));transition:filter .65s ease}
.video-monochrome #ytPlayer{filter:grayscale(1) blur(var(--video-blur-px,0px))}
.panel,.dock{backdrop-filter:none;-webkit-backdrop-filter:none}
.panel,.dock{background:rgba(8,8,8,var(--ui-alpha,.85))}
.video-grade,.video-vignette{transition:opacity .65s ease}
.dock-inner{grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);gap:18px;z-index:4}
.dock-controls{gap:12px}
.mode-control option,.mode-controls select option{background:#111;color:#eee}
.mode-button[data-tooltip]::after,.mode-control[data-tooltip]::after{content:attr(data-tooltip);position:absolute;bottom:calc(100% + 10px);right:0;padding:7px 9px;border:1px solid #ffffff26;border-radius:5px;background:#101010;color:#eee;font:10px var(--mono);white-space:nowrap;opacity:0;visibility:hidden;transform:translateY(4px);transition:opacity .2s,transform .2s;pointer-events:none;z-index:20}
.mode-button:hover::after,.mode-button:focus-visible::after,.mode-control:hover::after{visibility:visible;opacity:1;transform:translateY(0)}
.dock{overflow:visible}
.dock .seek{border-radius:17px 17px 0 0;overflow:visible}.seek-knob{opacity:1}
.mode-controls #equalizerSelect{width:58px;font:9px var(--mono);border:0;background:transparent;color:var(--muted);padding:3px 0}
@media(max-width:1180px){.dock-controls{gap:8px}.volume-control input,.blur-control input{width:58px}.mode-controls{gap:3px}.now-title{max-width:24ch}}
@media(max-width:980px){.dock-inner{grid-template-columns:minmax(0,1fr) auto}.dock-controls{justify-content:center}}
@media(max-width:640px){.dock-controls{gap:5px;flex-wrap:wrap}.volume-control input,.blur-control input{width:42px}.mode-controls{gap:1px}.mode-controls #equalizerSelect{width:44px}.dock{height:auto;min-height:110px}.dock-inner{height:auto;min-height:90px;padding-bottom:10px}.now-title{max-width:24ch}}
.now-thumbnail{width:52px;height:34px;border-radius:5px;object-fit:cover;flex:none}.now-thumbnail[hidden]{display:none}
.mini-btn .vol-off{display:none}.mini-control.is-muted .vol-on{display:none}.mini-control.is-muted .vol-off{display:block}
.opacity-control input{width:46px}.dock-controls{justify-self:end;flex-wrap:wrap;justify-content:flex-end;gap:7px}.mode-menu button[aria-pressed=true]{background:#eee;color:#111}
.blog-link{font:12px var(--mono);padding:8px 12px;border:1px solid var(--line);border-radius:7px;text-decoration:none}
@media(min-width:981px){.dock-inner{grid-template-columns:minmax(0,1fr) 120px minmax(0,1fr)}.transport{justify-self:center}.dock-controls{max-width:100%}.now-title{max-width:24ch}}
@media(max-width:980px){.dock-inner{grid-template-columns:1fr auto 1fr;gap:8px}.now{grid-column:1;grid-row:1}.transport{grid-column:2;grid-row:1;justify-self:center}.dock-controls{grid-column:1/-1;grid-row:2;justify-self:center;justify-content:center}.dock{height:auto;min-height:130px}.dock-inner{height:auto;min-height:112px;padding-top:8px;padding-bottom:10px}.now-quality{display:none}.now-title{max-width:15ch}.now-thumbnail{width:36px;height:26px}.now{gap:6px}}

/* desktop: keep every dock icon on one line and center the time above play */
@media (min-width:981px){
  .transport{position:relative}
  .seek-clock{top:auto;right:auto;bottom:calc(100% + 3px);left:50%;transform:translateX(-50%)}
}
@media (min-width:1241px) and (max-width:1599px){
  .dock-controls{flex-wrap:nowrap;gap:3px}
  .mini-value{display:none}
  .volume-control input{width:44px}
  .blur-control input{width:42px}
  .opacity-control input{width:32px}
}
@media (min-width:1600px){
  .dock-controls{flex-wrap:nowrap}
}
@media (min-width:981px) and (max-width:1240px){
  .dock{height:auto;min-height:116px}
  .dock-inner{height:auto;min-height:101px;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);grid-template-areas:"now transport ." "controls controls controls";gap:4px 14px;padding:18px 16px 10px}
  .now{grid-area:now}
  .transport{grid-area:transport;justify-self:center}
  .dock-controls{grid-area:controls;justify-self:stretch;justify-content:center;flex-wrap:nowrap}
}

/* keep the interface text clearly above the video equalizer */
.shell{z-index:8}
.eq-on .panel::before{background:linear-gradient(120deg,rgba(255,255,255,.055),transparent 26%,transparent 74%,rgba(255,255,255,.025)),rgba(6,6,6,.62)}
.eq-on .dock::before{background:linear-gradient(100deg,rgba(255,255,255,.05),transparent 24%,transparent 76%,rgba(255,255,255,.03)),rgba(6,6,6,.62)}