#vvi,
#vvi *,
#vvi *::before,
#vvi *::after{box-sizing:border-box}

html,body{
 margin:0;
 overflow-x:hidden!important;
 background:#2b2b2b!important
}

body.vvi-viewer-lock,
body.vvi-pdf-fullscreen-lock{
 overflow:hidden!important
}

#allrecords,
#allrecords .t-rec,
#allrecords .t123,
#allrecords .t396{background:transparent!important}

#allrecords .t123{
 padding-top:0!important;
 padding-bottom:0!important
}

#vvi{
 --bg:#2b2b2b;
 --card:#1b1c1e;
 --panel:#18191b;
 --panel-2:#232426;
 --text:#f2eee8;
 --muted:rgba(242,238,232,.62);
 --soft:rgba(242,238,232,.40);
 --line:rgba(242,238,232,.15);
 --orange:#f36f2b;
 --orange-soft:rgba(243,111,43,.075);
 --header:102px;
 --max:1460px;
 min-height:100svh;
 background:var(--bg);
 color:var(--text);
 font-family:"IBM Plex Serif",Georgia,serif
}

#vvi button,
#vvi input,
#vvi a{font:inherit}

#vvi button{-webkit-tap-highlight-color:transparent}
#vvi a{color:inherit}

/* ЭКРАНЫ */

.vvi-screen{
 display:none;
 min-height:100svh;
 background:
  radial-gradient(circle at 50% 4%,rgba(255,255,255,.025),transparent 32%),
  var(--bg)
}

.vvi-screen.is-active{display:block}

.vvi-section{
 min-height:100svh;
 padding:calc(var(--header) + 30px) 28px 34px;
 display:flex;
 flex-direction:column
}

.vvi-inner{
 width:min(var(--max),100%);
 min-height:0;
 flex:1;
 margin:auto;
 display:flex;
 flex-direction:column
}

.vvi-head{
 flex:0 0 auto;
 margin-bottom:38px;
 text-align:center
}

.vvi-kicker{
 margin:0 0 11px;
 color:var(--soft);
 font:10px/1 "IBM Plex Sans",Arial,sans-serif;
 letter-spacing:.18em;
 text-transform:uppercase
}

.vvi-title{
 margin:0;
 font-size:clamp(31px,3vw,48px);
 font-weight:400;
 line-height:1;
 letter-spacing:-.025em;
 text-transform:uppercase
}

.vvi-subtitle{
 margin:13px 0 0;
 color:var(--muted);
 font:14px/1.4 "IBM Plex Sans",Arial,sans-serif
}

.vvi-content{
 flex:1;
 min-height:0;
 display:flex;
 flex-direction:column;
 justify-content:center
}

/* ПОИСК */

.vvi-search-screen{
 height:100svh;
 min-height:100svh;
 overflow:hidden
}

.vvi-search-shell{
 width:min(1040px,calc(100% - 40px));
 height:100%;
 margin:auto;
 padding-top:calc(var(--header) + 72px);
 display:flex;
 flex-direction:column;
 align-items:center
}

.vvi-search-title{
 width:100%;
 margin:0;
 font-size:clamp(35px,3.45vw,51px);
 font-weight:400;
 line-height:1;
 letter-spacing:-.035em;
 text-align:center;
 text-transform:uppercase
}

.vvi-search-wrap{
 position:relative;
 width:100%;
 margin-top:62px;
 padding:0 18px;
 border:1px solid transparent;
 border-bottom-color:rgba(242,238,232,.22);
 border-radius:19px 19px 0 0;
 background:transparent;
 transition:border-color .22s ease,background-color .22s ease,box-shadow .22s ease
}

.vvi-search-wrap:focus-within,
.vvi-search-wrap.has-value{
 border-color:rgba(242,238,232,.18);
 border-bottom-color:var(--orange);
 background:rgba(255,255,255,.018);
 box-shadow:0 0 0 1px rgba(255,255,255,.015)
}

.vvi-search-input{
 width:100%;
 height:72px;
 padding:0 70px 0 22px;
 border:0;
 outline:0;
 background:transparent;
 color:var(--text);
 font:19px/1 "IBM Plex Sans",Arial,sans-serif
}

.vvi-search-input::placeholder{color:rgba(242,238,232,.48)}
.vvi-search-input::-webkit-search-cancel-button{display:none}

.vvi-search-control{
 position:absolute;
 top:50%;
 right:20px;
 width:46px;
 height:46px;
 padding:0;
 display:grid;
 place-items:center;
 border:0;
 border-radius:50%;
 background:transparent;
 color:var(--text);
 transform:translateY(-50%);
 cursor:pointer;
 transition:.25s ease
}

.vvi-search-wrap:focus-within .vvi-search-control,
.vvi-search-wrap.has-value .vvi-search-control{
 border:1px solid rgba(242,238,232,.22)
}

.vvi-search-control:hover,
.vvi-search-control.is-listening,
.vvi-search-control.is-clear{
 color:var(--orange);
 border-color:var(--orange);
 background:rgba(243,111,43,.07)
}

.vvi-search-control.is-listening{box-shadow:0 0 0 7px rgba(243,111,43,.08)}

.vvi-search-control svg{
 position:absolute;
 width:21px;
 height:21px;
 fill:none;
 stroke:currentColor;
 stroke-width:1.7;
 stroke-linecap:round;
 stroke-linejoin:round;
 transition:.2s ease
}

.vvi-search-trash{opacity:0;transform:scale(.65)}
.vvi-search-control.is-clear .vvi-search-mic{opacity:0;transform:scale(.65)}
.vvi-search-control.is-clear .vvi-search-trash{opacity:1;transform:scale(1)}

.vvi-search-eq{
 position:absolute;
 inset:0;
 display:flex;
 align-items:center;
 justify-content:center;
 gap:2px;
 opacity:0
}

.vvi-search-eq i{
 width:2px;
 height:7px;
 border-radius:99px;
 background:currentColor
}

.vvi-search-control.is-listening svg{opacity:0}
.vvi-search-control.is-listening .vvi-search-eq{opacity:1}
.vvi-search-control.is-listening .vvi-search-eq i{animation:vviVoice .75s ease-in-out infinite}
.vvi-search-control.is-listening .vvi-search-eq i:nth-child(2){animation-delay:.12s}
.vvi-search-control.is-listening .vvi-search-eq i:nth-child(3){animation-delay:.24s}
.vvi-search-control.is-listening .vvi-search-eq i:nth-child(4){animation-delay:.36s}

@keyframes vviVoice{
 0%,100%{height:7px}
 50%{height:19px}
}

.vvi-search-results{
 position:absolute;
 z-index:100;
 left:-1px;
 right:-1px;
 top:calc(100% + 1px);
 display:none;
 max-height:min(500px,55svh);
 padding:10px;
 overflow:auto;
 border:1px solid rgba(242,238,232,.16);
 border-top:0;
 border-radius:0 0 20px 20px;
 background:#313131;
 box-shadow:0 28px 54px rgba(0,0,0,.30);
 scrollbar-width:none
}

.vvi-search-results::-webkit-scrollbar{display:none}
.vvi-search-results.is-open{display:block}

.vvi-search-caption{
 padding:10px 14px 14px;
 color:var(--soft);
 font:10px/1.3 "IBM Plex Sans",Arial,sans-serif;
 letter-spacing:.14em;
 text-transform:uppercase
}

.vvi-search-empty{
 padding:25px 18px;
 color:var(--muted);
 font:14px/1.5 "IBM Plex Sans",Arial,sans-serif;
 text-align:center
}

/* ТИПЫ ЛЮКОВ В ПОИСКЕ */

.vvi-search-type-list{
 display:grid;
 grid-template-columns:repeat(2,minmax(0,1fr));
 gap:10px;
 padding:0 4px 4px
}

.vvi-search-type{
 position:relative;
 min-width:0;
 min-height:72px;
 padding:12px 18px;
 display:flex;
 align-items:center;
 gap:14px;
 overflow:hidden;
 border:1px solid rgba(242,238,232,.13);
 border-radius:17px;
 background:#1c1d1f;
 color:var(--text);
 text-align:left;
 cursor:pointer;
 transition:border-color .25s ease,background-color .25s ease,transform .25s ease,box-shadow .25s ease
}

.vvi-search-type:nth-child(5){grid-column:1/-1}

.vvi-search-type:hover{
 border-color:rgba(243,111,43,.70);
 background:
  linear-gradient(rgba(243,111,43,.055),rgba(243,111,43,.055)),
  #1c1d1f;
 transform:translateY(-1px);
 box-shadow:
  inset 0 0 0 .5px rgba(243,111,43,.22),
  0 10px 22px rgba(0,0,0,.12)
}

.vvi-search-type-icon{
 width:38px;
 height:38px;
 min-width:38px;
 display:grid;
 place-items:center;
 border:1px solid rgba(242,238,232,.22);
 border-radius:10px;
 background:rgba(255,255,255,.015);
 color:rgba(242,238,232,.80);
 transition:.25s ease
}

.vvi-search-type:hover .vvi-search-type-icon{
 color:var(--orange);
 border-color:rgba(243,111,43,.55);
 background:rgba(243,111,43,.07)
}

.vvi-search-type-icon svg{
 width:29px;
 height:29px;
 fill:none;
 stroke:currentColor;
 stroke-width:1.6;
 stroke-linecap:round;
 stroke-linejoin:round
}

.vvi-search-type-copy{
 min-width:0;
 display:flex;
 flex-direction:column;
 gap:5px
}

.vvi-search-type-title{
 display:block;
 color:#fff;
 font:14px/1.15 "IBM Plex Sans",Arial,sans-serif;
 font-weight:500
}

.vvi-search-type-subtitle{
 display:block;
 color:var(--soft);
 font:10px/1.2 "IBM Plex Sans",Arial,sans-serif;
 letter-spacing:.08em;
 text-transform:uppercase
}

/* РАСПОЛОЖЕНИЯ В ПОИСКЕ */

.vvi-search-position-grid{
 display:grid;
 grid-template-columns:repeat(3,minmax(0,1fr));
 gap:10px
}

.vvi-search-position{
 position:relative;
 height:186px;
 min-width:0;
 padding:0;
 overflow:hidden;
 border:1px solid rgba(242,238,232,.12);
 border-radius:16px;
 background:var(--card)!important;
 color:var(--text);
 cursor:pointer;
 isolation:isolate;
 transition:border-color .25s ease,transform .25s ease,box-shadow .25s ease,background-color .25s ease
}

.vvi-search-position:hover{
 border-color:rgba(243,111,43,.70);
 background:
  linear-gradient(rgba(243,111,43,.055),rgba(243,111,43,.055)),
  var(--card)!important;
 transform:translateY(-2px);
 box-shadow:
  inset 0 0 0 .5px rgba(243,111,43,.20),
  0 12px 24px rgba(0,0,0,.12)
}

.vvi-search-position-number{
 position:absolute;
 z-index:4;
 top:12px;
 left:13px;
 color:var(--text);
 font:11px/1 "IBM Plex Sans",Arial,sans-serif;
 letter-spacing:.08em;
 text-transform:uppercase
}

.vvi-search-position-image{
 position:absolute;
 z-index:1;
 inset:27px 6px 49px;
 display:flex;
 align-items:center;
 justify-content:center;
 overflow:hidden;
 background:var(--card)!important
}

.vvi-search-position-image img{
 width:142%;
 height:142%;
 display:block;
 object-fit:contain;
 mix-blend-mode:screen;
 filter:grayscale(.12) saturate(1.05) contrast(1.08) brightness(.96);
 transition:transform .35s ease,filter .35s ease
}

.vvi-search-position:hover .vvi-search-position-image img{
 transform:scale(1.03);
 filter:grayscale(.08) saturate(1.10) contrast(1.09) brightness(1)
}

.vvi-search-position-name{
 position:absolute;
 z-index:4;
 left:10px;
 right:10px;
 bottom:12px;
 color:rgba(242,238,232,.92);
 font:13px/1.25 "IBM Plex Sans",Arial,sans-serif;
 font-weight:500;
 text-align:center
}

/* РЕЗУЛЬТАТЫ ПОИСКА */

.vvi-search-document{
 min-height:94px;
 padding:14px;
 display:grid;
 grid-template-columns:minmax(0,1fr) 430px;
 gap:24px;
 align-items:center;
 border-bottom:1px solid rgba(242,238,232,.08);
 border-radius:15px
}

.vvi-search-document:last-child{border-bottom:0}
.vvi-search-document:hover{background:rgba(255,255,255,.026)}

.vvi-search-document-title{
 display:block;
 font-size:17px;
 line-height:1.25
}

.vvi-search-document-meta{
 display:block;
 margin-top:6px;
 color:var(--soft);
 font:10px/1.2 "IBM Plex Sans",Arial,sans-serif;
 letter-spacing:.09em;
 text-transform:uppercase
}

/* ОВАЛ ОТКРЫТЬ / ПОДЕЛИТЬСЯ / СКАЧАТЬ */

.vvi-doc-switch{
 position:relative;
 width:100%;
 height:60px;
 display:grid;
 grid-template-columns:repeat(3,minmax(0,1fr));
 column-gap:7px;
 padding:5px;
 overflow:hidden;
 border:1px solid rgba(242,238,232,.22);
 border-radius:999px;
 background:#272729
}

.vvi-doc-switch__slider{
 position:absolute;
 z-index:1;
 top:5px;
 bottom:5px;
 left:5px;
 width:calc((100% - 24px) / 3);
 border:1px solid rgba(243,111,43,.80);
 border-radius:999px;
 background:rgba(243,111,43,.045);
 pointer-events:none;
 transform:translateX(0);
 transition:transform .38s cubic-bezier(.22,.61,.36,1),opacity .22s ease
}

.vvi-doc-switch[data-index="0"] .vvi-doc-switch__slider{transform:translateX(0)}
.vvi-doc-switch[data-index="1"] .vvi-doc-switch__slider{transform:translateX(calc(100% + 7px))}
.vvi-doc-switch[data-index="2"] .vvi-doc-switch__slider{transform:translateX(calc(200% + 14px))}

.vvi-doc-switch__button{
 position:relative;
 z-index:2;
 min-width:0;
 height:100%;
 padding:0 14px;
 display:flex;
 align-items:center;
 justify-content:center;
 border:0;
 border-radius:999px;
 background:transparent;
 color:rgba(242,238,232,.58);
 font:10px/1 "IBM Plex Sans",Arial,sans-serif;
 letter-spacing:.055em;
 text-transform:uppercase;
 text-decoration:none;
 white-space:nowrap;
 cursor:pointer;
 transition:color .24s ease,opacity .24s ease,background-color .24s ease
}

.vvi-doc-switch__button:hover{
 color:#fff;
 background:rgba(243,111,43,.055)
}

.vvi-doc-switch[data-index="0"] [data-doc-action="open"],
.vvi-doc-switch[data-index="1"] [data-doc-action="share"],
.vvi-doc-switch[data-index="2"] [data-doc-action="download"]{color:#fff}

.vvi-doc-switch__button.is-disabled{
 opacity:.28;
 pointer-events:none
}

.vvi-doc-share-icons{
 position:absolute;
 z-index:5;
 inset:5px;
 display:flex;
 align-items:center;
 justify-content:center;
 gap:10px;
 border:1px solid rgba(243,111,43,.78);
 border-radius:999px;
 background:#29292b;
 opacity:0;
 visibility:hidden;
 transform:scale(.94);
 pointer-events:none;
 transition:.28s ease
}

.vvi-doc-switch.is-sharing .vvi-doc-share-icons{
 opacity:1;
 visibility:visible;
 transform:scale(1);
 pointer-events:auto
}

.vvi-doc-switch.is-sharing .vvi-doc-switch__button,
.vvi-doc-switch.is-sharing .vvi-doc-switch__slider{
 opacity:0;
 pointer-events:none
}

/* ИКОНКИ ПОДЕЛИТЬСЯ */

.vvi-doc-share-icon,
.vvi-share-item{
 width:38px;
 height:38px;
 min-width:38px;
 padding:0;
 display:grid;
 place-items:center;
 border:1px solid rgba(242,238,232,.28);
 border-radius:50%;
 background:transparent;
 color:#fff;
 cursor:pointer;
 transition:.25s ease
}

.vvi-doc-share-icon:hover,
.vvi-share-item:hover{
 border-color:var(--orange);
 background:rgba(243,111,43,.10);
 transform:translateY(-1px)
}

.vvi-doc-share-icon svg,
.vvi-share-item svg{
 width:19px;
 height:19px;
 display:block
}

.vvi-doc-share-icon--large svg,
.vvi-share-item--large svg{
 width:22px;
 height:22px
}

.vvi-share-item--close,
.vvi-doc-share-icon.vvi-share-item--close{
 color:var(--orange);
 border-color:rgba(243,111,43,.55)
}

.vvi-share-item--close svg,
.vvi-doc-share-icon.vvi-share-item--close svg{
 width:16px;
 height:16px;
 fill:none;
 stroke:currentColor;
 stroke-width:1.8;
 stroke-linecap:round;
 stroke-linejoin:round
}

/* РУЧНОЙ ВЫБОР */

.vvi-manual-link{
 margin-top:76px;
 padding:0;
 border:0;
 background:transparent;
 color:rgba(242,238,232,.66);
 font:13px/1 "IBM Plex Sans",Arial,sans-serif;
 letter-spacing:.16em;
 text-transform:uppercase;
 cursor:pointer;
 animation:vviManualPulse 2.4s ease-in-out infinite
}

.vvi-manual-link:hover{
 color:var(--orange);
 transform:translateY(-2px);
 animation-play-state:paused
}

@keyframes vviManualPulse{
 0%,100%{opacity:.38}
 50%{opacity:1}
}

.vvi-manual{
 position:relative;
 height:100svh;
 min-height:100svh;
 padding-top:var(--header);
 overflow:hidden;
 background:#111214
}

.vvi-manual-grid{
 height:100%;
 display:grid;
 grid-template-columns:repeat(2,minmax(0,1fr))
}

.vvi-manual-card{
 position:relative;
 min-width:0;
 min-height:0;
 padding:0;
 display:flex;
 flex-direction:column;
 overflow:hidden;
 border:0;
 border-right:1px solid rgba(255,255,255,.06);
 background:#1a1a1c;
 color:var(--text);
 cursor:pointer
}

.vvi-manual-card:last-child{border-right:0}

.vvi-manual-visual{
 position:relative;
 flex:1;
 min-height:0;
 overflow:hidden
}

.vvi-manual-image{
 position:absolute;
 inset:0;
 background-position:center;
 background-size:cover;
 transition:transform .85s cubic-bezier(.22,.61,.36,1)
}

.vvi-manual-image::after{
 content:"";
 position:absolute;
 inset:0;
 background:linear-gradient(180deg,rgba(0,0,0,.01),rgba(0,0,0,.04) 55%,rgba(0,0,0,.20))
}

.vvi-manual-card:hover .vvi-manual-image{transform:scale(1.035)}

.vvi-manual-label{
 position:relative;
 flex:0 0 118px;
 display:flex;
 align-items:center;
 justify-content:center;
 background:#181818
}

.vvi-manual-label::before{
 content:"";
 position:absolute;
 top:0;
 left:0;
 right:0;
 height:1px;
 background:rgba(242,238,232,.10)
}

.vvi-manual-label::after{
 content:"";
 position:absolute;
 top:-1px;
 left:50%;
 width:0;
 height:1px;
 background:var(--orange);
 transform:translateX(-50%);
 transition:width .55s ease
}

.vvi-manual-card:hover .vvi-manual-label::after{width:108px}

.vvi-manual-title{
 font:19px/1.15 "IBM Plex Sans",Arial,sans-serif;
 text-align:center;
 text-transform:uppercase
}

/* ВЫБОР МОДЕЛИ */

.vvi-type-screen{
 position:relative;
 height:100svh;
 min-height:100svh;
 padding-top:var(--header);
 overflow:hidden;
 background:#111214
}

.vvi-type-catalog{
 position:relative;
 height:100%;
 display:flex;
 flex-direction:column
}

.vvi-type-grid{
 flex:1;
 min-height:0;
 display:grid;
 grid-template-columns:repeat(2,minmax(0,1fr));
 grid-template-rows:repeat(2,minmax(0,1fr))
}

.vvi-type-card{
 position:relative;
 min-width:0;
 min-height:0;
 padding:0;
 display:flex;
 flex-direction:column;
 overflow:hidden;
 border:0;
 border-right:1px solid rgba(255,255,255,.06);
 border-bottom:1px solid rgba(255,255,255,.06);
 background:#1a1a1c;
 color:var(--text);
 cursor:pointer
}

.vvi-type-card:nth-child(2n){border-right:0}
.vvi-type-card:nth-child(3),
.vvi-type-card:nth-child(4){border-bottom:0}

.vvi-type-visual{
 position:relative;
 flex:1;
 min-height:0;
 overflow:hidden;
 background:#202022
}

.vvi-type-image{
 position:absolute;
 inset:0;
 background-position:center;
 background-size:cover;
 transition:transform .85s cubic-bezier(.22,.61,.36,1),filter .45s ease
}

.vvi-type-card:hover .vvi-type-image{
 transform:scale(1.035);
 filter:brightness(1.025)
}

.vvi-type-label{
 position:relative;
 flex:0 0 96px;
 min-height:96px;
 display:flex;
 align-items:center;
 justify-content:center;
 padding:18px 70px;
 background:#181818;
 color:#fff;
 font:17px/1.1 "IBM Plex Sans",Arial,sans-serif;
 text-transform:uppercase;
 text-align:center
}

.vvi-type-label::before{
 content:"";
 position:absolute;
 top:0;
 left:0;
 right:0;
 height:1px;
 background:rgba(242,238,232,.10)
}

.vvi-type-label::after{
 content:"";
 position:absolute;
 top:-1px;
 left:50%;
 width:0;
 height:1px;
 background:var(--orange);
 transform:translateX(-50%);
 transition:width .55s cubic-bezier(.22,.61,.36,1)
}

.vvi-type-card:hover .vvi-type-label::after{width:88px}

.vvi-type-arrow{
 position:absolute;
 right:22px;
 bottom:27px;
 width:39px;
 height:39px;
 display:grid;
 place-items:center;
 border:1px solid rgba(242,238,232,.14);
 border-radius:50%;
 background:transparent;
 color:#fff;
 transition:.28s ease
}

.vvi-type-card:hover .vvi-type-arrow{
 border-color:var(--orange);
 transform:translateX(4px)
}

.vvi-type-arrow svg{
 width:15px;
 height:15px;
 fill:none;
 stroke:currentColor;
 stroke-width:1.6;
 stroke-linecap:round;
 stroke-linejoin:round
}

/* ВЫБОР РАСПОЛОЖЕНИЯ */

.vvi-position-grid{
 flex:1;
 min-height:0;
 display:grid;
 grid-template-columns:repeat(3,minmax(0,1fr));
 grid-template-rows:repeat(2,minmax(0,1fr));
 gap:16px
}

.vvi-position-card{
 position:relative;
 min-width:0;
 min-height:0;
 padding:0;
 overflow:hidden;
 border:1px solid var(--line);
 border-radius:23px;
 background:var(--card)!important;
 color:var(--text);
 cursor:pointer;
 isolation:isolate;
 transition:border-color .25s ease,transform .25s ease,box-shadow .25s ease,background-color .25s ease
}

.vvi-position-card:hover{
 border-color:rgba(243,111,43,.70);
 background:
  linear-gradient(rgba(243,111,43,.055),rgba(243,111,43,.055)),
  var(--card)!important;
 transform:translateY(-2px);
 box-shadow:
  inset 0 0 0 .5px rgba(243,111,43,.20),
  0 12px 28px rgba(0,0,0,.14)
}

.vvi-position-title{
 position:absolute;
 z-index:5;
 top:17px;
 left:18px;
 right:18px;
 color:var(--text);
 font:14px/1 "IBM Plex Sans",Arial,sans-serif;
 font-weight:500;
 letter-spacing:.04em;
 text-align:center;
 text-transform:uppercase
}

.vvi-position-image{
 position:absolute;
 z-index:1;
 inset:42px 8px 60px;
 display:flex;
 align-items:center;
 justify-content:center;
 overflow:hidden;
 background:transparent!important
}

.vvi-position-image img{
 width:134%;
 height:134%;
 display:block;
 object-fit:contain;
 mix-blend-mode:screen;
 filter:grayscale(.12) saturate(1.05) contrast(1.08) brightness(.94);
 transition:transform .42s cubic-bezier(.22,.61,.36,1),filter .35s ease
}

.vvi-position-card:hover .vvi-position-image img{
 transform:scale(1.02);
 filter:grayscale(.08) saturate(1.10) contrast(1.09) brightness(1)
}

.vvi-position-hotspot{display:none!important}

.vvi-position-name{
 position:absolute;
 z-index:5;
 left:12px;
 right:12px;
 bottom:20px;
 color:rgba(242,238,232,.92);
 font:14px/1.25 "IBM Plex Sans",Arial,sans-serif;
 font-weight:500;
 text-align:center
}

/* КАРТОЧКИ МАТЕРИАЛОВ */

.vvi-materials-section{padding-bottom:26px}

.vvi-material-grid{
 flex:1;
 min-height:0;
 display:grid;
 grid-template-columns:repeat(4,minmax(0,1fr));
 gap:16px
}

.vvi-material-card{
 position:relative;
 min-width:0;
 min-height:320px;
 padding:0;
 display:flex;
 flex-direction:column;
 overflow:hidden;
 border:1px solid var(--line);
 border-radius:26px;
 background:#181818;
 color:var(--text);
 cursor:pointer;
 transition:.38s ease
}

.vvi-material-card:hover{
 border-color:rgba(243,111,43,.70);
 background:linear-gradient(rgba(243,111,43,.055),rgba(243,111,43,.055)),#181818;
 transform:translateY(-2px);
 box-shadow:
  inset 0 0 0 .5px rgba(243,111,43,.20),
  0 14px 28px rgba(0,0,0,.12)
}

.vvi-material-visual{
 position:absolute;
 inset:0;
 overflow:hidden
}

.vvi-material-visual svg,
.vvi-material-visual img{
 width:100%;
 height:100%;
 display:block;
 object-fit:cover
}

.vvi-material-visual::after{
 content:"";
 position:absolute;
 inset:0;
 background:linear-gradient(180deg,rgba(0,0,0,.06),rgba(0,0,0,.12) 45%,rgba(0,0,0,.82))
}

.vvi-material-top{
 position:relative;
 z-index:3;
 width:100%;
 padding:20px 20px 0;
 display:flex;
 align-items:flex-start;
 justify-content:space-between
}

.vvi-material-number{
 color:rgba(242,238,232,.72);
 font:9px/1 "IBM Plex Sans",Arial,sans-serif;
 letter-spacing:.15em;
 text-transform:uppercase
}

.vvi-format{
 min-height:25px;
 padding:0 10px;
 display:flex;
 align-items:center;
 border:1px solid rgba(242,238,232,.26);
 border-radius:999px;
 background:rgba(0,0,0,.18);
 color:rgba(242,238,232,.86);
 font:8px/1 "IBM Plex Sans",Arial,sans-serif;
 letter-spacing:.12em;
 text-transform:uppercase
}

.vvi-material-center{
 position:relative;
 z-index:3;
 flex:1;
 display:flex;
 align-items:flex-end;
 justify-content:center;
 padding:32px 20px 54px;
 text-align:center
}

.vvi-material-title{
 display:flex;
 align-items:center;
 justify-content:center;
 color:#fff;
 font-size:clamp(20px,1.7vw,27px);
 line-height:1.14;
 text-shadow:0 3px 18px rgba(0,0,0,.45)
}

.vvi-material-open{
 position:absolute;
 z-index:4;
 left:0;
 right:0;
 bottom:22px;
 color:rgba(242,238,232,.70);
 font:9px/1 "IBM Plex Sans",Arial,sans-serif;
 letter-spacing:.15em;
 text-transform:uppercase;
 text-align:center;
 transition:color .3s ease
}

.vvi-material-card:hover .vvi-material-open{color:var(--orange)}

/* НИЖНЯЯ ПАНЕЛЬ */

.vvi-material-bottom{
 position:relative;
 width:min(660px,100%);
 height:62px;
 margin:32px auto 0;
 flex:0 0 auto
}

.vvi-action-switch{
 position:relative;
 width:100%;
 height:62px;
 margin:0;
 padding:5px;
 display:grid;
 grid-template-columns:repeat(3,minmax(0,1fr));
 overflow:hidden;
 border:1px solid rgba(242,238,232,.22);
 border-radius:999px;
 background:#272729
}

.vvi-action-switch--two{grid-template-columns:repeat(2,minmax(0,1fr))}

.vvi-action-switch__slider{
 position:absolute;
 z-index:1;
 top:5px;
 bottom:5px;
 left:5px;
 width:calc((100% - 10px) / 3);
 border:1px solid rgba(243,111,43,.80);
 border-radius:999px;
 background:rgba(243,111,43,.045);
 pointer-events:none;
 transform:translateX(0);
 transition:transform .38s cubic-bezier(.22,.61,.36,1),opacity .22s ease
}

.vvi-action-switch--two .vvi-action-switch__slider{width:calc((100% - 10px) / 2)}
.vvi-action-switch[data-index="0"] .vvi-action-switch__slider{transform:translateX(0)}
.vvi-action-switch[data-index="1"] .vvi-action-switch__slider{transform:translateX(100%)}
.vvi-action-switch[data-index="2"] .vvi-action-switch__slider{transform:translateX(200%)}

.vvi-action-switch__button{
 position:relative;
 z-index:2;
 min-width:0;
 height:100%;
 padding:0 14px;
 display:flex;
 align-items:center;
 justify-content:center;
 border:0;
 border-radius:999px;
 background:transparent;
 color:rgba(242,238,232,.58)!important;
 text-decoration:none!important;
 font:10px/1 "IBM Plex Sans",Arial,sans-serif;
 letter-spacing:.07em;
 text-transform:uppercase;
 white-space:nowrap;
 cursor:pointer;
 transition:.24s ease
}

.vvi-action-switch__button:hover{
 color:#fff!important;
 background:rgba(243,111,43,.055)
}

.vvi-action-switch[data-index="0"] .vvi-action-switch__button:nth-of-type(1),
.vvi-action-switch[data-index="1"] .vvi-action-switch__button:nth-of-type(2),
.vvi-action-switch[data-index="2"] .vvi-action-switch__button:nth-of-type(3){
 color:#fff!important
}

.vvi-action-switch__button.is-disabled{
 opacity:.28;
 pointer-events:none
}

.vvi-action-switch__share{
 position:absolute;
 z-index:8;
 inset:5px;
 display:flex;
 align-items:center;
 justify-content:center;
 gap:10px;
 border:1px solid rgba(243,111,43,.78);
 border-radius:999px;
 background:#29292b;
 opacity:0;
 visibility:hidden;
 transform:scale(.94);
 pointer-events:none;
 transition:.28s ease
}

.vvi-action-switch.is-sharing .vvi-action-switch__share{
 opacity:1;
 visibility:visible;
 transform:scale(1);
 pointer-events:auto
}

.vvi-action-switch.is-sharing .vvi-action-switch__button,
.vvi-action-switch.is-sharing .vvi-action-switch__slider{
 opacity:0;
 pointer-events:none
}

/* КРУГЛАЯ СТРЕЛКА — НЕ ПРОСВЕЧИВАЕТ */

.vvi-material-bottom::after{
 content:"";
 position:absolute;
 z-index:9;
 top:50%;
 left:50%;
 width:72px;
 height:72px;
 border-radius:50%;
 background:var(--bg);
 transform:translate(-50%,-50%);
 pointer-events:none
}

.vvi-material-bottom > .vvi-material-scroll{
 position:absolute;
 z-index:10;
 top:50%;
 left:50%;
 width:50px;
 height:50px;
 min-width:50px;
 min-height:50px;
 margin:0;
 padding:0;
 display:grid;
 place-items:center;
 border:1px solid rgba(242,238,232,.48);
 border-radius:50%;
 background:var(--bg);
 color:#fff;
 transform:translate(-50%,-50%);
 cursor:pointer;
 box-shadow:none;
 transition:.3s ease
}

.vvi-material-bottom > .vvi-material-scroll:hover{
 border-color:var(--orange);
 background:#332d29
}

.vvi-material-bottom:has(.vvi-action-switch.is-sharing)::after,
.vvi-material-bottom:has(.vvi-action-switch.is-sharing) > .vvi-material-scroll{
 opacity:0;
 visibility:hidden;
 pointer-events:none
}

.vvi-material-scroll svg{
 width:20px;
 height:20px;
 fill:none;
 stroke:currentColor;
 stroke-width:1.6;
 stroke-linecap:round;
 stroke-linejoin:round;
 animation:vviArrowDown 1.5s ease-in-out infinite
}

.vvi-material-scroll--up{
 width:50px;
 height:50px;
 min-width:50px;
 min-height:50px;
 margin:24px auto 0;
 padding:0;
 display:grid;
 place-items:center;
 border:1px solid rgba(242,238,232,.40);
 border-radius:50%;
 background:transparent;
 color:#fff;
 cursor:pointer
}

.vvi-material-scroll--up svg{animation:vviArrowUp 1.5s ease-in-out infinite}

.vvi-material-bottom .vvi-action-switch__button:first-of-type{padding-right:42px}
.vvi-material-bottom .vvi-action-switch__button:nth-of-type(2){padding-left:42px}

@keyframes vviArrowDown{
 0%,100%{transform:translateY(-3px)}
 50%{transform:translateY(4px)}
}

@keyframes vviArrowUp{
 0%,100%{transform:translateY(3px)}
 50%{transform:translateY(-4px)}
}

/* ТАБЛИЦА */

.vvi-material-table-section{padding-top:calc(var(--header) + 54px)}

.vvi-table-panel{
 width:min(1180px,100%);
 margin:auto;
 padding:30px 34px 24px;
 border:1px solid var(--line);
 border-radius:26px;
 background:#181818
}

.vvi-table{
 width:100%;
 border-collapse:collapse;
 table-layout:fixed;
 font-family:"IBM Plex Sans",Arial,sans-serif
}

.vvi-table th,
.vvi-table td{
 height:56px;
 padding:10px 14px;
 border-bottom:1px solid rgba(242,238,232,.09);
 text-align:center
}

.vvi-table th{
 font-size:12px;
 font-weight:500;
 letter-spacing:.07em;
 text-transform:uppercase
}

.vvi-table td{
 color:var(--muted);
 font-size:13px
}

.vvi-table th:first-child,
.vvi-table td:first-child{
 width:52%;
 color:var(--text);
 text-align:left
}

.vvi-table tr:last-child td{border-bottom:0}

.vvi-check{
 width:26px;
 height:26px;
 display:inline-flex;
 align-items:center;
 justify-content:center;
 border:1px solid rgba(242,238,232,.18);
 border-radius:50%
}

.vvi-table-note{
 margin:18px 0 0;
 color:var(--soft);
 font:12px/1.5 "IBM Plex Sans",Arial,sans-serif;
 text-align:center
}

/* ПРОСМОТР ДОКУМЕНТА */

.vvi-viewer-section{
 height:100svh;
 min-height:100svh;
 padding:calc(var(--header) + 44px) 28px 18px;
 overflow:hidden
}

.vvi-viewer{
 flex:1;
 min-height:0;
 display:flex;
 flex-direction:column
}

.vvi-viewer-top{
 margin-bottom:18px;
 display:grid;
 grid-template-columns:minmax(0,1fr) minmax(430px,560px);
 gap:32px;
 align-items:center
}

.vvi-viewer-heading{min-width:0}

.vvi-viewer-title{
 margin:0;
 font-size:clamp(28px,2.6vw,42px);
 font-weight:400
}

.vvi-viewer-meta{
 margin:9px 0 0;
 color:var(--muted);
 font:12px/1.4 "IBM Plex Sans",Arial,sans-serif
}

.vvi-viewer-action-switch{
 width:100%;
 margin:0
}

.vvi-viewer-frame{
 position:relative;
 flex:1;
 min-height:0;
 overflow:hidden;
 border:1px solid var(--line);
 border-radius:18px;
 background:#17181a
}

.vvi-viewer-frame iframe,
.vvi-viewer-frame video{
 width:100%;
 height:100%;
 display:block;
 border:0;
 background:#111
}

.vvi-placeholder{
 width:100%;
 height:100%;
 display:flex;
 align-items:center;
 justify-content:center;
 padding:30px;
 color:var(--muted);
 font:14px/1.5 "IBM Plex Sans",Arial,sans-serif;
 text-align:center
}

/* PDF */

.vvi-pdf-viewer{
 width:100%;
 height:100%;
 min-height:0;
 display:flex;
 flex-direction:column;
 background:#17181a
}

.vvi-pdf-toolbar{
 position:relative;
 z-index:20;
 flex:0 0 auto;
 min-height:59px;
 padding:13.5px 12px;
 display:flex;
 align-items:center;
 justify-content:space-between;
 gap:18px;
 border-bottom:1px solid rgba(242,238,232,.10);
 background:#232426;
 box-shadow:0 5px 16px rgba(0,0,0,.14)
}

.vvi-pdf-tools-left,
.vvi-pdf-tools-right{
 display:flex;
 align-items:center;
 gap:4px
}

.vvi-pdf-tool,
.vvi-pdf-scale{
 height:28px;
 min-width:28px;
 padding:0 8px;
 display:inline-flex;
 align-items:center;
 justify-content:center;
 border:1px solid rgba(242,238,232,.15);
 border-radius:999px;
 background:rgba(255,255,255,.010);
 color:rgba(242,238,232,.76);
 font:8px/1 "IBM Plex Sans",Arial,sans-serif;
 letter-spacing:.018em;
 text-transform:uppercase;
 cursor:pointer;
 transition:color .2s ease,border-color .2s ease,background-color .2s ease,transform .2s ease
}

.vvi-pdf-tool:hover,
.vvi-pdf-scale:hover{
 color:#fff;
 border-color:rgba(243,111,43,.72);
 background:rgba(243,111,43,.065);
 transform:translateY(-1px)
}

.vvi-pdf-scale{
 min-width:108px;
 padding:0 12px
}

.vvi-pdf-tool--icon{
 width:28px;
 min-width:28px;
 padding:0
}

.vvi-pdf-tool svg{
 width:13px;
 height:13px;
 fill:none;
 stroke:currentColor;
 stroke-width:1.55;
 stroke-linecap:round;
 stroke-linejoin:round
}

.vvi-pdf-tool.is-active,
.vvi-pdf-tool.has-drawing{
 color:#fff;
 border-color:rgba(243,111,43,.82);
 background:rgba(243,111,43,.10)
}

.vvi-pdf-tool.has-drawing{color:var(--orange)}

.vvi-pdf-scale-wrap{
 position:relative;
 display:flex;
 align-items:center
}

.vvi-pdf-scale-menu{
 position:absolute;
 z-index:50;
 top:calc(100% + 7px);
 left:0;
 width:220px;
 max-height:min(520px,70vh);
 padding:7px;
 overflow:auto;
 border:1px solid rgba(242,238,232,.20);
 border-radius:16px;
 background:#252426;
 box-shadow:0 18px 44px rgba(0,0,0,.42);
 opacity:0;
 visibility:hidden;
 transform:translateY(-5px) scale(.98);
 transform-origin:top left;
 pointer-events:none;
 transition:.18s ease
}

.vvi-pdf-scale-wrap.is-open .vvi-pdf-scale-menu{
 opacity:1;
 visibility:visible;
 transform:translateY(0) scale(1);
 pointer-events:auto
}

.vvi-pdf-scale-menu button{
 position:relative;
 width:100%;
 min-height:35px;
 padding:0 12px 0 34px;
 display:flex;
 align-items:center;
 border:0;
 border-radius:10px;
 background:transparent;
 color:rgba(242,238,232,.82);
 font:12px/1.2 "IBM Plex Sans",Arial,sans-serif;
 text-align:left;
 cursor:pointer
}

.vvi-pdf-scale-menu button:hover{
 background:rgba(255,255,255,.055);
 color:#fff
}

.vvi-pdf-scale-menu button.is-active{
 background:rgba(243,111,43,.10);
 color:#fff
}

.vvi-pdf-scale-menu button.is-active::before{
 content:"✓";
 position:absolute;
 left:12px;
 color:var(--orange);
 font-size:14px
}

.vvi-pdf-pages{
 position:relative;
 flex:1;
 min-height:0;
 padding:22px 24px 30px;
 overflow:auto;
 overscroll-behavior:contain;
 display:flex;
 flex-direction:column;
 align-items:center;
 gap:22px;
 background:
  radial-gradient(circle at 50% 0,rgba(255,255,255,.03),transparent 32%),
  #17181a;
 scrollbar-color:rgba(242,238,232,.24) transparent;
 scrollbar-width:thin
}

.vvi-pdf-pages::-webkit-scrollbar{width:10px;height:10px}
.vvi-pdf-pages::-webkit-scrollbar-track{background:transparent}
.vvi-pdf-pages::-webkit-scrollbar-thumb{
 border:3px solid transparent;
 border-radius:999px;
 background:rgba(242,238,232,.24);
 background-clip:padding-box
}

.vvi-pdf-page{
 position:relative;
 flex:0 0 auto;
 overflow:hidden;
 border:1px solid rgba(242,238,232,.14);
 border-radius:8px;
 background:#fff;
 box-shadow:0 18px 42px rgba(0,0,0,.34),0 2px 8px rgba(0,0,0,.24)
}

.vvi-pdf-page--pending{background:#f4f4f4}

.vvi-pdf-page > canvas:not(.vvi-pdf-marker-layer){
 display:block;
 max-width:none
}

.vvi-pdf-marker-layer{
 position:absolute;
 z-index:5;
 inset:0;
 width:100%;
 height:100%;
 pointer-events:none;
 cursor:default;
 touch-action:auto
}

.vvi-pdf-marker-layer.is-drawing{
 pointer-events:auto;
 cursor:crosshair;
 touch-action:none
}

.vvi-pdf-loading{
 min-height:100%;
 width:100%;
 display:flex;
 align-items:center;
 justify-content:center;
 color:var(--muted);
 font:13px/1.5 "IBM Plex Sans",Arial,sans-serif;
 letter-spacing:.04em
}

.vvi-pdf-loading::before{
 content:"";
 width:18px;
 height:18px;
 margin-right:10px;
 border:2px solid rgba(242,238,232,.18);
 border-top-color:var(--orange);
 border-radius:50%;
 animation:vviPdfSpin .8s linear infinite
}

@keyframes vviPdfSpin{to{transform:rotate(360deg)}}

/* ПОЛНЫЙ ЭКРАН PDF */

.vvi-pdf-viewer.is-fullscreen{
 position:fixed;
 z-index:2147483000;
 inset:0;
 width:100vw;
 height:100dvh;
 border:0;
 border-radius:0;
 background:#111214
}

.vvi-pdf-viewer.is-fullscreen .vvi-pdf-toolbar{
 min-height:67px;
 padding:16.5px 24px;
 gap:24px
}

.vvi-pdf-viewer.is-fullscreen .vvi-pdf-tools-left,
.vvi-pdf-viewer.is-fullscreen .vvi-pdf-tools-right{
 gap:6px
}

.vvi-pdf-viewer.is-fullscreen .vvi-pdf-pages{
 padding:8px 8px 18px;
 gap:16px
}

.vvi-pdf-viewer.is-fullscreen .vvi-pdf-page{
 border-radius:4px
}

/* СОВРЕМЕННЫЙ ВИДЕОПЛЕЕР */

.vvi-video-player{
 width:100%;
 height:100%;
 min-height:0;
 padding:clamp(10px,1.6vw,26px);
 display:flex;
 align-items:center;
 justify-content:center;
 background:radial-gradient(circle at 50% 42%,rgba(255,255,255,.035),transparent 42%),#111214
}

.vvi-video-player__stage{
 position:relative;
 width:100%;
 height:100%;
 min-height:0;
 overflow:hidden;
 border:1px solid rgba(242,238,232,.14);
 border-radius:16px;
 background:#070809;
 box-shadow:0 24px 64px rgba(0,0,0,.36)
}

.vvi-video-player__stage video{
 width:100%;
 height:100%;
 display:block;
 object-fit:contain;
 background:#050506
}

.vvi-video-player__placeholder{
 position:absolute;
 inset:0;
 display:flex;
 flex-direction:column;
 align-items:center;
 justify-content:center;
 gap:12px;
 padding:28px 28px 52px;
 color:rgba(242,238,232,.76);
 background:radial-gradient(circle at 50% 45%,rgba(243,111,43,.08),transparent 30%),linear-gradient(180deg,#111315,#08090a);
 font:12px/1.45 "IBM Plex Sans",Arial,sans-serif;
 letter-spacing:.06em;
 text-align:center
}

.vvi-video-player__placeholder strong{
 color:#f2eee8;
 font-size:13px;
 font-weight:500;
 letter-spacing:.12em;
 text-transform:uppercase
}

.vvi-video-player__play{
 width:74px;
 height:74px;
 margin-bottom:8px;
 display:flex;
 align-items:center;
 justify-content:center;
 border-radius:50%;
 color:#fff;
 background:var(--orange);
 box-shadow:0 12px 34px rgba(243,111,43,.28)
}

.vvi-video-player__play svg{
 width:34px;
 height:34px;
 margin-left:3px;
 fill:currentColor
}

.vvi-video-player__timeline{
 position:absolute;
 left:22px;
 right:22px;
 bottom:20px;
 height:3px;
 overflow:hidden;
 border-radius:3px;
 background:rgba(242,238,232,.20)
}

.vvi-video-player__timeline::before{
 content:"";
 display:block;
 width:18%;
 height:100%;
 background:var(--orange)
}

/* ОБЩИЕ КНОПКИ */

.vvi-actions{
 width:min(610px,100%);
 margin:38px auto 0;
 display:grid;
 grid-template-columns:repeat(2,minmax(0,1fr));
 gap:14px
}

.vvi-btn{
 width:100%;
 min-height:54px;
 padding:0 20px;
 display:flex;
 align-items:center;
 justify-content:center;
 border:1px solid rgba(242,238,232,.72);
 border-radius:999px;
 background:transparent;
 color:var(--text)!important;
 text-decoration:none!important;
 font:12px/1 "IBM Plex Serif",Georgia,serif;
 letter-spacing:.13em;
 text-transform:uppercase;
 cursor:pointer;
 transition:.32s ease
}

.vvi-btn:hover{
 border-color:var(--orange);
 background:var(--orange-soft);
 transform:translateY(-2px)
}

.vvi-share{position:relative}

.vvi-share-menu{
 position:absolute;
 z-index:10;
 inset:0;
 padding:0 14px;
 display:flex;
 align-items:center;
 justify-content:center;
 gap:9px;
 border:1px solid var(--orange);
 border-radius:999px;
 background:#2b2b2b;
 opacity:0;
 visibility:hidden;
 transform:scale(.90);
 pointer-events:none;
 transition:.28s ease
}

.vvi-share.is-open .vvi-share-menu{
 opacity:1;
 visibility:visible;
 transform:scale(1);
 pointer-events:auto
}

.vvi-share.is-open > .vvi-btn{
 opacity:0;
 visibility:hidden
}

/* АДАПТИВ */

@media(max-width:1100px){
 .vvi-position-grid{
  grid-template-columns:repeat(2,minmax(0,1fr));
  grid-template-rows:repeat(3,minmax(0,1fr))
 }

 .vvi-material-grid{
  grid-template-columns:repeat(2,minmax(0,1fr));
  grid-template-rows:repeat(2,minmax(0,1fr))
 }

 .vvi-viewer-top{
  grid-template-columns:1fr;
  gap:16px
 }

 .vvi-pdf-pages{
  padding:18px 16px 26px;
  gap:18px
 }
}

@media(max-width:760px){
 #vvi{--header:72px}

 .vvi-section{padding:calc(var(--header) + 16px) 10px 18px}
 .vvi-head{margin-bottom:22px}
 .vvi-title{font-size:27px}

 .vvi-search-shell{
  width:calc(100% - 24px);
  padding-top:calc(var(--header) + 40px)
 }

 .vvi-search-title{font-size:31px}

 .vvi-search-wrap{
  margin-top:48px;
  padding:0 6px
 }

 .vvi-search-input{
  height:62px;
  padding:0 58px 0 12px;
  font-size:14px
 }

 .vvi-search-control{
  right:9px;
  width:42px;
  height:42px
 }

 .vvi-manual-link{
  margin-top:54px;
  font-size:11px
 }

 .vvi-search-type-list{
  grid-template-columns:1fr;
  gap:8px
 }

 .vvi-search-type:nth-child(5){grid-column:auto}
 .vvi-search-type{min-height:64px;padding:10px 13px}
 .vvi-search-type-icon{width:35px;height:35px;min-width:35px}
 .vvi-search-type-icon svg{width:26px;height:26px}

 .vvi-search-position-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
 .vvi-search-position{height:160px}
 .vvi-search-position-image{inset:25px 2px 46px}
 .vvi-search-position-image img{width:152%;height:152%}
 .vvi-search-position-name{font-size:11px}

 .vvi-search-document{
  grid-template-columns:1fr;
  gap:12px
 }

 .vvi-doc-switch{height:54px}
 .vvi-doc-switch__button{
  padding:0 8px;
  font-size:8px;
  letter-spacing:.03em
 }

 .vvi-manual-grid{
  grid-template-columns:1fr;
  grid-template-rows:repeat(2,minmax(0,1fr));
  gap:8px;
  padding:8px 10px 10px
 }

 .vvi-manual-card{
  border:0;
  border-radius:24px
 }

 .vvi-manual-label{
  position:absolute;
  z-index:3;
  left:0;
  right:0;
  bottom:0;
  min-height:auto;
  padding:0 12px 14px;
  background:linear-gradient(180deg,transparent,rgba(0,0,0,.62))
 }

 .vvi-manual-label::before,
 .vvi-manual-label::after{display:none}

 .vvi-manual-title{font-size:14px}

 .vvi-type-grid{
  gap:8px;
  padding:8px 10px 10px
 }

 .vvi-type-card{
  border:0;
  border-radius:22px
 }

 .vvi-type-label{
  position:absolute;
  z-index:3;
  left:0;
  right:0;
  bottom:0;
  min-height:auto;
  padding:0 44px 14px;
  background:linear-gradient(180deg,transparent,rgba(0,0,0,.64));
  font-size:13px
 }

 .vvi-type-label::before,
 .vvi-type-label::after{display:none}

 .vvi-type-arrow{
  right:10px;
  bottom:9px;
  width:32px;
  height:32px
 }

 .vvi-position-grid{
  grid-template-columns:repeat(2,minmax(0,1fr));
  grid-template-rows:repeat(3,minmax(0,1fr));
  gap:8px
 }

 .vvi-position-card{
  min-height:180px;
  border-radius:17px
 }

 .vvi-position-title{
  top:12px;
  left:12px;
  font-size:10px
 }

 .vvi-position-image{inset:29px 0 51px}
 .vvi-position-image img{width:148%;height:148%}

 .vvi-position-name{
  bottom:12px;
  font-size:11px
 }

 .vvi-material-grid{
  grid-template-columns:repeat(2,minmax(0,1fr));
  grid-template-rows:repeat(2,minmax(0,1fr));
  gap:9px
 }

 .vvi-material-card{
  min-height:230px;
  border-radius:19px
 }

 .vvi-material-top{padding:13px 11px 0}
 .vvi-material-number{font-size:7px}

 .vvi-format{
  min-height:21px;
  padding:0 7px;
  font-size:7px
 }

 .vvi-material-center{padding:24px 10px 45px}
 .vvi-material-title{font-size:15px}
 .vvi-material-open{bottom:15px;font-size:7px}

 .vvi-material-bottom{
  height:54px;
  margin-top:24px
 }

 .vvi-action-switch{height:54px}

 .vvi-action-switch__button{
  padding:0 8px;
  font-size:8px;
  letter-spacing:.035em
 }

 .vvi-material-bottom::after{width:62px;height:62px}

 .vvi-material-bottom > .vvi-material-scroll{
  width:44px;
  height:44px;
  min-width:44px;
  min-height:44px
 }

 .vvi-material-bottom .vvi-action-switch__button:first-of-type{padding-right:30px}
 .vvi-material-bottom .vvi-action-switch__button:nth-of-type(2){padding-left:30px}

 .vvi-material-table-section{padding-top:calc(var(--header) + 22px)}

 .vvi-table-panel{
  padding:16px 8px 13px;
  border-radius:20px;
  overflow-x:auto
 }

 .vvi-table{min-width:680px}

 .vvi-table th,
 .vvi-table td{
  height:48px;
  padding:7px 8px;
  font-size:9px
 }

 .vvi-check{width:22px;height:22px}

 .vvi-viewer-section{
  height:100svh;
  min-height:100svh;
  padding:calc(var(--header) + 20px) 10px 8px
 }

 .vvi-viewer-top{margin-bottom:10px}
 .vvi-viewer-title{font-size:24px}
 .vvi-viewer-meta{font-size:9px}
 .vvi-viewer-action-switch{height:52px}
 .vvi-viewer-frame{border-radius:13px}

 .vvi-pdf-toolbar{
  min-height:57px;
  padding:13.5px 8px;
  gap:8px
 }

 .vvi-pdf-tools-left,
 .vvi-pdf-tools-right{gap:4px}

 .vvi-pdf-tool,
 .vvi-pdf-scale{
  height:27px;
  min-width:27px;
  padding:0 6px;
  font-size:7px
 }

 .vvi-pdf-tool--icon{
  width:27px;
  min-width:27px;
  padding:0
 }

 .vvi-pdf-scale{
  min-width:88px;
  padding:0 8px
 }

 .vvi-pdf-tool svg{width:12px;height:12px}

 .vvi-pdf-pages{
  padding:12px 7px 18px;
  gap:12px
 }

 .vvi-pdf-page{
  border-radius:5px;
  box-shadow:0 12px 28px rgba(0,0,0,.32),0 2px 6px rgba(0,0,0,.22)
 }

 .vvi-pdf-viewer.is-fullscreen .vvi-pdf-toolbar{
  min-height:63px;
  padding:15.5px 14px
 }

 .vvi-pdf-viewer.is-fullscreen .vvi-pdf-pages{
  padding:6px 4px 14px
 }

 .vvi-pdf-scale-menu{
  width:210px;
  max-height:62vh
 }

}

@media(max-width:420px){
 .vvi-pdf-toolbar{
  flex-wrap:nowrap;
  justify-content:space-between
 }

 .vvi-pdf-tools-left,
 .vvi-pdf-tools-right{justify-content:center}

 .vvi-pdf-scale{
  min-width:82px;
  max-width:98px
 }

 .vvi-pdf-tool,
 .vvi-pdf-scale{
  height:26px;
  min-width:26px
 }

 .vvi-pdf-tool--icon{
  width:26px;
  min-width:26px
 }
}

/* VVI PATCH 15 — карточки, карандаш, плавный масштаб и видеоплеер */

/* В поисковой выдаче изображение не перекрывает общую оранжевую подсветку карточки. */
.vvi-search-position-image{
 background:transparent!important
}

/* Названия всех четырёх материалов остаются в одну строку. */
.vvi-material-title{
 display:block!important;
 width:100%;
 overflow:visible;
 font-size:clamp(14px,1.12vw,18px)!important;
 line-height:1!important;
 letter-spacing:-.015em;
 white-space:nowrap!important
}

/* Плавное визуальное сопровождение жеста масштабирования на трекпаде. */
.vvi-pdf-pages.is-pinching .vvi-pdf-page{
 transform:scale(var(--vvi-pdf-preview-scale,1));
 transform-origin:0 0;
 transition:transform 32ms linear;
 will-change:transform
}

.vvi-pdf-tool.is-loading{
 opacity:.55;
 cursor:progress;
 pointer-events:none
}

/* Настройки карандаша. */
.vvi-pdf-marker-wrap{
 position:relative;
 display:flex;
 align-items:center
}

.vvi-pdf-marker-settings{
 position:absolute;
 z-index:80;
 top:calc(100% + 9px);
 right:0;
 width:230px;
 padding:13px 14px 14px;
 display:grid;
 gap:12px;
 border:1px solid rgba(242,238,232,.20);
 border-radius:15px;
 background:#252426;
 box-shadow:0 18px 44px rgba(0,0,0,.42);
 opacity:0;
 visibility:hidden;
 transform:translateY(-5px);
 pointer-events:none;
 transition:opacity .18s ease,transform .18s ease,visibility .18s ease
}

.vvi-pdf-marker-settings.is-open{
 opacity:1;
 visibility:visible;
 transform:translateY(0);
 pointer-events:auto
}

.vvi-pdf-marker-setting{
 display:grid;
 grid-template-columns:1fr auto;
 gap:7px 10px;
 color:rgba(242,238,232,.78);
 font:10px/1.2 "IBM Plex Sans",Arial,sans-serif;
 letter-spacing:.04em
}

.vvi-pdf-marker-setting output{
 color:var(--orange);
 font-variant-numeric:tabular-nums
}

.vvi-pdf-marker-setting input{
 grid-column:1/-1;
 width:100%;
 margin:0;
 accent-color:var(--orange);
 cursor:pointer
}

.vvi-pdf-marker-layer.is-drawing{
 cursor:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='28' viewBox='0 0 28 28'%3E%3Cpath d='M4 24l2-7L20 3l5 5L11 22z' fill='%23f36f2b' stroke='%23ffffff' stroke-width='1.3'/%3E%3Cpath d='M6 17l5 5M18 5l5 5' fill='none' stroke='%23232323' stroke-width='1.3'/%3E%3C/svg%3E") 4 25,crosshair!important
}

/* Компактный видеоплеер с необходимыми элементами управления. */
.vvi-video-player__stage video{
 position:absolute;
 inset:0;
 width:100%;
 height:100%;
 object-fit:contain;
 background:#050506
}

.vvi-video-controls{
 position:absolute;
 z-index:12;
 left:0;
 right:0;
 bottom:0;
 padding:44px 18px 14px;
 color:#fff;
 background:linear-gradient(180deg,transparent,rgba(0,0,0,.88));
 font:11px/1 "IBM Plex Sans",Arial,sans-serif
}

.vvi-video-progress{
 width:100%;
 height:4px;
 margin:0 0 11px;
 display:block;
 accent-color:var(--orange);
 cursor:pointer
}

.vvi-video-controls__row{
 display:flex;
 align-items:center;
 gap:12px
}

.vvi-video-control{
 width:34px;
 height:34px;
 min-width:34px;
 padding:0;
 display:inline-flex;
 align-items:center;
 justify-content:center;
 border:0;
 border-radius:50%;
 background:transparent;
 color:#fff;
 cursor:pointer;
 transition:background-color .18s ease,color .18s ease
}

.vvi-video-control:hover{
 background:rgba(255,255,255,.10);
 color:var(--orange)
}

.vvi-video-control:disabled,
.vvi-video-progress:disabled,
.vvi-video-volume input:disabled{
 opacity:.35;
 cursor:not-allowed
}

.vvi-video-control svg,
.vvi-video-volume svg{
 width:20px;
 height:20px;
 fill:currentColor
}

.vvi-video-play .vvi-video-icon--pause{display:none}
.vvi-video-play.is-playing .vvi-video-icon--play{display:none}
.vvi-video-play.is-playing .vvi-video-icon--pause{display:block}

.vvi-video-volume{
 display:flex;
 align-items:center;
 gap:7px;
 color:#fff
}

.vvi-video-volume input{
 width:88px;
 accent-color:var(--orange);
 cursor:pointer
}

.vvi-video-time{
 min-width:82px;
 color:rgba(255,255,255,.82);
 font-variant-numeric:tabular-nums;
 white-space:nowrap
}

.vvi-video-fullscreen{margin-left:auto}

.vvi-video-player__stage:fullscreen{
 border:0;
 border-radius:0;
 background:#000
}

@media(max-width:760px){
 .vvi-material-title{
  font-size:clamp(8px,2.65vw,12px)!important;
  letter-spacing:-.025em
 }

 .vvi-pdf-marker-settings{
  width:205px;
  right:-4px
 }

 .vvi-video-controls{
  padding:36px 10px 9px
 }

 .vvi-video-controls__row{gap:6px}
 .vvi-video-volume input{width:54px}
 .vvi-video-time{min-width:70px;font-size:9px}
}

/* VVI PATCH 18 — статичный масштаб, встроенные инструменты рисования и плавный pinch */

/* Кнопки масштаба занимают неизменные позиции при любой подписи. */
.vvi-pdf-zoom-cluster{
 width:208px;
 min-width:208px;
 flex:0 0 208px;
 display:grid!important;
 grid-template-columns:28px 112px 28px 28px;
 align-items:center;
 gap:4px
}

.vvi-pdf-zoom-cluster .vvi-pdf-scale-wrap{
 width:112px;
 min-width:112px;
 max-width:112px
}

.vvi-pdf-zoom-cluster .vvi-pdf-scale{
 width:112px;
 min-width:112px;
 max-width:112px;
 padding:0 9px;
 overflow:hidden;
 white-space:nowrap;
 text-overflow:ellipsis
}

.vvi-pdf-auto-reset.is-active{
 color:var(--orange);
 border-color:rgba(243,111,43,.82);
 background:rgba(243,111,43,.10)
}

/* Инструменты карандаша находятся в шапке и не перекрывают PDF. */
.vvi-pdf-draw-tools{
 display:none;
 align-items:center;
 gap:4px;
 min-width:0
}

.vvi-pdf-draw-tools.is-visible{display:flex}

.vvi-pdf-draw-control{
 height:28px;
 padding:0 7px;
 display:flex;
 align-items:center;
 gap:6px;
 border:1px solid rgba(242,238,232,.15);
 border-radius:999px;
 background:rgba(255,255,255,.012);
 color:rgba(242,238,232,.76)
}

.vvi-pdf-draw-control input[type="range"]{
 width:66px;
 height:4px;
 margin:0;
 accent-color:var(--orange);
 cursor:pointer
}

.vvi-pdf-draw-control output{
 min-width:22px;
 color:var(--orange);
 font:8px/1 "IBM Plex Sans",Arial,sans-serif;
 text-align:right;
 white-space:nowrap
}

.vvi-pdf-draw-control--opacity output{min-width:29px}

.vvi-pdf-draw-preview{
 position:relative;
 width:20px;
 min-width:20px;
 height:20px;
 display:inline-flex;
 align-items:center;
 justify-content:center;
 border-radius:50%
}

.vvi-pdf-draw-preview--width::before{
 content:"";
 width:var(--vvi-draw-preview-size,10px);
 height:var(--vvi-draw-preview-size,10px);
 border-radius:50%;
 background:var(--orange);
 box-shadow:0 0 0 1px rgba(255,255,255,.12);
 transition:width .08s linear,height .08s linear
}

.vvi-pdf-draw-preview--opacity{
 border:1px solid rgba(242,238,232,.25);
 background:
  linear-gradient(45deg,rgba(255,255,255,.10) 25%,transparent 25%,transparent 75%,rgba(255,255,255,.10) 75%),
  linear-gradient(45deg,rgba(255,255,255,.10) 25%,transparent 25%,transparent 75%,rgba(255,255,255,.10) 75%);
 background-position:0 0,3px 3px;
 background-size:6px 6px
}

.vvi-pdf-draw-preview--opacity::before{
 content:"";
 width:14px;
 height:14px;
 border-radius:50%;
 background:rgb(243 111 43 / var(--vvi-draw-preview-alpha,.42));
 box-shadow:inset 0 0 0 1px rgba(243,111,43,.20);
 transition:background-color .08s linear
}

.vvi-pdf-eraser.is-active{
 color:#fff;
 border-color:rgba(243,111,43,.88);
 background:rgba(243,111,43,.16)
}

/* Один общий слой масштабируется без повторной перерисовки во время жеста. */
.vvi-pdf-pages{
 align-items:safe center!important
}

.vvi-pdf-stage{
 position:relative;
 width:max-content;
 max-width:none;
 flex:0 0 auto;
 display:flex;
 flex-direction:column;
 align-items:safe center;
 gap:22px;
 transform-origin:0 0;
 will-change:transform
}

.vvi-pdf-pages.is-pinching .vvi-pdf-page{
 transform:none!important;
 transition:none!important;
 will-change:auto!important
}

.vvi-pdf-pages.is-pinching .vvi-pdf-stage{
 transition:none!important
}

.vvi-pdf-marker-layer.is-erasing{
 pointer-events:auto;
 touch-action:none;
 cursor:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='28' viewBox='0 0 28 28'%3E%3Ccircle cx='14' cy='14' r='10' fill='rgba(255,255,255,.15)' stroke='%23f36f2b' stroke-width='2'/%3E%3Cpath d='M9 17l7-8 4 4-7 8H9z' fill='none' stroke='%23fff' stroke-width='1.4'/%3E%3C/svg%3E") 14 14,cell!important
}

@media(max-width:980px){
 .vvi-pdf-toolbar.is-marker-active{
  flex-wrap:wrap;
  row-gap:8px
 }

 .vvi-pdf-toolbar.is-marker-active .vvi-pdf-tools-right{
  width:100%;
  justify-content:flex-end
 }

 .vvi-pdf-draw-control input[type="range"]{width:58px}
}

@media(max-width:760px){
 .vvi-pdf-zoom-cluster{
  width:190px;
  min-width:190px;
  flex-basis:190px;
  grid-template-columns:27px 100px 27px 27px;
  gap:3px
 }

 .vvi-pdf-zoom-cluster .vvi-pdf-scale-wrap,
 .vvi-pdf-zoom-cluster .vvi-pdf-scale{
  width:100px;
  min-width:100px;
  max-width:100px
 }

 .vvi-pdf-stage{gap:12px}

 .vvi-pdf-draw-control{
  padding:0 5px;
  gap:4px
 }

 .vvi-pdf-draw-control input[type="range"]{width:48px}
 .vvi-pdf-draw-preview{width:18px;min-width:18px;height:18px}
}

@media(max-width:520px){
 .vvi-pdf-toolbar.is-marker-active .vvi-pdf-draw-tools{
  width:100%;
  justify-content:flex-end
 }

 .vvi-pdf-draw-control input[type="range"]{width:40px}
}

/* VVI PATCH 20 — удобная панель, равномерный маркер и бесшовный pinch */

.vvi-pdf-zoom-cluster{
 width:276px!important;
 min-width:276px!important;
 flex:0 0 276px!important;
 grid-template-columns:28px 28px 180px 28px!important;
 gap:4px!important
}

.vvi-pdf-zoom-cluster .vvi-pdf-scale-wrap,
.vvi-pdf-zoom-cluster .vvi-pdf-scale{
 width:180px!important;
 min-width:180px!important;
 max-width:180px!important
}

.vvi-pdf-zoom-cluster .vvi-pdf-scale{
 padding:0 16px!important;
 overflow:hidden;
 font:16px/1 "IBM Plex Serif",Georgia,serif!important;
 letter-spacing:0!important;
 text-transform:none!important;
 text-overflow:clip
}

.vvi-pdf-tools-right{
 position:relative;
 flex:0 0 auto;
 margin-left:auto
}

.vvi-pdf-draw-tools{
 position:absolute;
 z-index:3;
 top:50%;
 right:96px;
 transform:translateY(-50%);
 flex-wrap:nowrap;
 white-space:nowrap
}

.vvi-pdf-toolbar.is-marker-active .vvi-pdf-tools-right{
 flex:0 0 auto
}

.vvi-pdf-pages.is-auto-fit{
 overflow-x:hidden!important
}

.vvi-pdf-stage--preparing{
 opacity:0!important
}

.vvi-pdf-marker-layer.is-erasing{
 cursor:none!important
}

.vvi-pdf-eraser-cursor{
 --vvi-eraser-size:28px;
 position:absolute;
 z-index:8;
 width:var(--vvi-eraser-size);
 height:var(--vvi-eraser-size);
 border:1px dashed rgba(243,111,43,.92);
 border-radius:50%;
 background:rgba(20,20,21,.12);
 box-shadow:0 0 0 1px rgba(255,255,255,.18),0 2px 8px rgba(0,0,0,.35);
 opacity:0;
 transform:translate(-50%,-50%);
 pointer-events:none;
 transition:opacity .08s linear
}

.vvi-pdf-eraser-cursor.is-visible{opacity:1}

.vvi-pdf-eraser-cursor svg{
 position:absolute;
 left:50%;
 top:50%;
 width:22px;
 height:22px;
 transform:translate(-50%,-50%);
 overflow:visible
}

.vvi-pdf-eraser-cursor rect{
 fill:#f2eee8;
 stroke:#252426;
 stroke-width:1.5
}

.vvi-pdf-eraser-cursor path{
 fill:none;
 stroke:#f36f2b;
 stroke-width:1.4;
 stroke-linecap:round
}

@media(max-width:980px){
 .vvi-pdf-toolbar.is-marker-active .vvi-pdf-tools-right{
  width:100%;
  justify-content:flex-end
 }
}

@media(max-width:760px){
 .vvi-pdf-zoom-cluster{
  width:216px!important;
  min-width:216px!important;
  flex-basis:216px!important;
  grid-template-columns:27px 27px 126px 27px!important;
  gap:3px!important
 }

 .vvi-pdf-zoom-cluster .vvi-pdf-scale-wrap,
 .vvi-pdf-zoom-cluster .vvi-pdf-scale{
  width:126px!important;
  min-width:126px!important;
  max-width:126px!important
 }

 .vvi-pdf-zoom-cluster .vvi-pdf-scale{
  padding:0 9px!important;
  font-size:12px!important
 }
}

@media(max-width:520px){
 .vvi-pdf-toolbar.is-marker-active .vvi-pdf-draw-tools{
  width:auto;
  justify-content:flex-end
 }

 .vvi-pdf-draw-tools{right:93px}
}

/* v22: extra 7mm gap before drawing tools */
.vvi-pdf-draw-tools{right:calc(96px + 7mm)}
@media(max-width:520px){.vvi-pdf-draw-tools{right:calc(93px + 7mm)}