/* Видеоуроки WEB-приложения. Стили изолированы от блоков flexcore-new. */
@font-face {
      font-family: "PS Display";
      src: url("/fonts/PFDinTextPro/pfdintextpro-medium.ttf") format("truetype");
      font-weight: 500;
      font-style: normal;
      font-display: swap;
    }

    @font-face {
      font-family: "PS Text";
      src: url("/fonts/Roboto.woff2") format("woff2");
      font-weight: 400;
      font-style: normal;
      font-display: swap;
    }

    @font-face {
      font-family: "PS Text";
      src: url("/fonts/Robotomedium.woff2") format("woff2");
      font-weight: 500;
      font-style: normal;
      font-display: swap;
    }

    .web-video-lessons-page{
      --night: #101f2a;
      --night-soft: #183243;
      --blue: #286d9b;
      --blue-deep: #174866;
      --ice: #acd2e6;
      --paper: #eef1f0;
      --white: #fbfcfb;
      --ink: #172127;
      --muted: #66747b;
      --line: #c8d0d2;
      --header: 60px;
      --shell: 1500px;
      --gutter: clamp(22px, 5vw, 78px);
    }

    .web-video-lessons-page *,.web-video-lessons-page *::before,.web-video-lessons-page *::after{ box-sizing: border-box; }
    .web-video-lessons-page{ scroll-behavior: smooth; scroll-padding-top: calc(var(--header) + 24px); }
    .web-video-lessons-page{
      min-width: 320px;
      margin: 0;
      color: var(--ink);
      background: var(--paper);
      font-family: "PS Text", Arial, sans-serif;
      font-size: 16px;
      line-height: 1.6;
      -webkit-font-smoothing: antialiased;
    }
    .web-video-lessons-page.menu-open{ overflow: hidden; }
    .web-video-lessons-page img{ display: block; max-width: 100%; }
    .web-video-lessons-page a{ color: inherit; text-decoration: none; }
    .web-video-lessons-page button{ color: inherit; font: inherit; }
    .web-video-lessons-page button,.web-video-lessons-page a{ -webkit-tap-highlight-color: transparent; }
    .web-video-lessons-page ::selection{ color: #fff; background: var(--blue); }
    .web-video-lessons-page :focus-visible{ outline: 2px solid var(--ice); outline-offset: 3px; }

    .web-video-lessons-page .shell{
      width: 100%;
      max-width: var(--shell);
      margin-inline: auto;
      padding-inline: var(--gutter);
    }

    .web-video-lessons-page .reading-progress{
      position: fixed;
      z-index: 100;
      top: 0;
      left: 0;
      width: 0;
      height: 3px;
      background: var(--ice);
      pointer-events: none;
    }

    .web-video-lessons-page .site-header{
      position: absolute;
      z-index: 50;
      top: 0;
      right: 0;
      left: 0;
      color: #fff;
      border-bottom: 1px solid rgba(172, 210, 230, .28);
      background: rgba(16, 31, 42, .88);
      backdrop-filter: blur(10px);
    }
    .web-video-lessons-page .site-header.is-sticky{
      position: fixed;
      background: rgba(16, 31, 42, .97);
      box-shadow: 0 12px 28px rgba(0, 0, 0, .16);
    }
    .web-video-lessons-page .header__inner{
      min-height: var(--header);
      display: flex;
      align-items: center;
      gap: 42px;
    }
    .web-video-lessons-page .brand{
      display: inline-flex;
      flex: 0 0 auto;
      align-items: center;
      gap: 12px;
    }
    .web-video-lessons-page .brand__icon{
      width: 25px;
      height: 31px;
      object-fit: contain;
    }
    .web-video-lessons-page .brand__copy{ display: grid; gap: 3px; }
    .web-video-lessons-page .brand__name{
      font-family: "PS Display", Arial, sans-serif;
      font-size: 18px;
      line-height: 1;
      letter-spacing: .035em;
      text-transform: uppercase;
    }
    .web-video-lessons-page .brand__meta{
      color: #9eb0bc;
      font-size: 8px;
      line-height: 1;
      letter-spacing: .06em;
      white-space: nowrap;
    }
    .web-video-lessons-page .main-nav{
      display: flex;
      align-items: stretch;
      gap: 0;
      margin-left: auto;
      color: #d8e2e6;
      font-size: 10px;
      font-weight: 500;
      letter-spacing: .035em;
      text-transform: uppercase;
    }
    .web-video-lessons-page .main-nav > a{
      position: relative;
      min-height: var(--header);
      display: inline-flex;
      align-items: center;
      padding: 0 14px;
    }
    .web-video-lessons-page .main-nav > a::after{
      content: "";
      position: absolute;
      right: 14px;
      bottom: 0;
      left: 14px;
      height: 2px;
      background: var(--ice);
      transform: scaleX(0);
      transform-origin: center;
      transition: transform .18s ease;
    }
    .web-video-lessons-page .main-nav > a:hover,.web-video-lessons-page .main-nav > a:focus-visible{ color: #fff; }
    .web-video-lessons-page .main-nav > a:hover::after,.web-video-lessons-page .main-nav > a:focus-visible::after,.web-video-lessons-page .main-nav > a[aria-current="page"]::after{ transform: scaleX(1); }
    .web-video-lessons-page .header__back{
      padding-inline: 17px !important;
      color: #dce9ee;
      background: rgba(172, 210, 230, .075);
    }
    .web-video-lessons-page .header__back::after{ display: none; }
    .web-video-lessons-page .header__back:hover,.web-video-lessons-page .header__back:focus-visible{
      color: var(--night) !important;
      background: var(--ice);
    }
    .web-video-lessons-page .menu-toggle{
      display: none;
      width: 42px;
      height: 42px;
      margin-left: auto;
      padding: 0;
      border: 1px solid rgba(172, 210, 230, .35);
      background: transparent;
      cursor: pointer;
    }
    .web-video-lessons-page .menu-toggle span,.web-video-lessons-page .menu-toggle::before,.web-video-lessons-page .menu-toggle::after{
      content: "";
      display: block;
      width: 18px;
      height: 2px;
      margin: 5px auto;
      background: #fff;
      transition: transform .18s ease, opacity .18s ease;
    }
    .web-video-lessons-page .menu-toggle.is-active span{ opacity: 0; }
    .web-video-lessons-page .menu-toggle.is-active::before{ transform: translateY(7px) rotate(45deg); }
    .web-video-lessons-page .menu-toggle.is-active::after{ transform: translateY(-7px) rotate(-45deg); }

    .web-video-lessons-page .hero{
      position: relative;
      min-height: 720px;
      overflow: hidden;
      color: #fff;
      background: var(--night);
    }
    .web-video-lessons-page .hero::before{
      content: "";
      position: absolute;
      inset: 0;
      opacity: .18;
      background-image:
        linear-gradient(rgba(172, 210, 230, .18) 1px, transparent 1px),
        linear-gradient(90deg, rgba(172, 210, 230, .18) 1px, transparent 1px);
      background-size: 68px 68px;
      -webkit-mask-image: linear-gradient(90deg, transparent 4%, #000 44%, #000);
      mask-image: linear-gradient(90deg, transparent 4%, #000 44%, #000);
    }
    .web-video-lessons-page .hero::after{
      content: "WEB / 04";
      position: absolute;
      right: -26px;
      bottom: -43px;
      color: rgba(255, 255, 255, .034);
      font-family: "PS Display", Arial, sans-serif;
      font-size: clamp(120px, 17vw, 270px);
      line-height: .78;
      letter-spacing: -.035em;
      white-space: nowrap;
      pointer-events: none;
    }
    .web-video-lessons-page .hero__inner{
      position: relative;
      z-index: 2;
      min-height: 720px;
      display: grid;
      grid-template-columns: minmax(0, .92fr) minmax(520px, .9fr);
      align-items: center;
      gap: clamp(52px, 7vw, 112px);
      padding-top: calc(var(--header) + 62px);
      padding-bottom: 72px;
    }
    .web-video-lessons-page .eyebrow{
      display: flex;
      align-items: center;
      gap: 11px;
      margin: 0 0 20px;
      color: var(--ice);
      font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
      font-size: 10px;
      letter-spacing: .13em;
      text-transform: uppercase;
    }
    .web-video-lessons-page .eyebrow::before{
      content: "";
      width: 34px;
      height: 1px;
      background: currentColor;
    }
    .web-video-lessons-page .hero h1{
      max-width: 790px;
      margin: 0;
      font-family: "PS Display", Arial, sans-serif;
      font-size: clamp(52px, 5.2vw, 86px);
      font-weight: 500;
      line-height: .95;
      letter-spacing: -.025em;
    }
    .web-video-lessons-page .hero h1 span{
      display: block;
      color: var(--ice);
    }
    .web-video-lessons-page .hero__lead{
      max-width: 680px;
      margin: 27px 0 0;
      color: #c4d1d7;
      font-size: clamp(16px, 1.25vw, 20px);
      line-height: 1.65;
    }
    .web-video-lessons-page .hero__actions{
      display: flex;
      flex-wrap: wrap;
      gap: 11px;
      margin-top: 34px;
    }
    .web-video-lessons-page .action{
      min-height: 48px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 12px;
      padding: 11px 20px;
      border: 1px solid rgba(172, 210, 230, .35);
      font-size: 12px;
      font-weight: 500;
      transition: color .18s ease, border-color .18s ease, background .18s ease;
    }
    .web-video-lessons-page .action--primary{
      color: var(--night);
      border-color: var(--ice);
      background: var(--ice);
    }
    .web-video-lessons-page .action--primary:hover{ background: #d0e8f2; }
    .web-video-lessons-page .action--secondary:hover{ color: var(--night); border-color: var(--ice); background: var(--ice); }
    .web-video-lessons-page .hero__stats{
      display: flex;
      align-items: stretch;
      margin-top: 42px;
    }
    .web-video-lessons-page .hero-stat{
      min-width: 125px;
      display: grid;
      gap: 5px;
      padding-right: 22px;
    }
    .web-video-lessons-page .hero-stat + .hero-stat{
      padding-left: 22px;
      border-left: 1px solid rgba(172, 210, 230, .22);
    }
    .web-video-lessons-page .hero-stat strong{
      color: #fff;
      font-family: "PS Display", Arial, sans-serif;
      font-size: 29px;
      font-weight: 500;
      line-height: 1;
    }
    .web-video-lessons-page .hero-stat span{
      color: #90a4af;
      font-size: 9px;
      letter-spacing: .08em;
      text-transform: uppercase;
    }

    .web-video-lessons-page .web-console{
      position: relative;
      min-height: 500px;
      perspective: 1200px;
    }
    .web-video-lessons-page .browser-frame{
      position: absolute;
      z-index: 1;
      top: 32px;
      right: 0;
      left: 0;
      overflow: hidden;
      border: 1px solid rgba(172, 210, 230, .52);
      background: #d9e3e7;
      box-shadow: 0 35px 80px rgba(0, 0, 0, .35);
      transform: rotateY(-5deg) rotateX(1deg);
      transform-origin: center left;
    }
    .web-video-lessons-page .browser-bar{
      height: 35px;
      display: flex;
      align-items: center;
      gap: 6px;
      padding: 0 12px;
      color: #8ea5af;
      background: #0b1720;
    }
    .web-video-lessons-page .browser-bar i{
      width: 6px;
      height: 6px;
      border: 1px solid #7f99a5;
      border-radius: 50%;
    }
    .web-video-lessons-page .browser-bar b{
      margin-left: 9px;
      font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
      font-size: 8px;
      font-weight: 400;
      letter-spacing: .08em;
      text-transform: uppercase;
    }
    .web-video-lessons-page .browser-crop{
      height: 310px;
      overflow: hidden;
      background: #1f7084;
    }
    .web-video-lessons-page .browser-crop img{
      width: 100%;
      height: 100%;
      object-fit: cover;
      object-position: 49% top;
      filter: saturate(.75) contrast(1.03) brightness(.9);
    }
    .web-video-lessons-page .route-window{
      position: absolute;
      z-index: 3;
      right: 24px;
      bottom: 25px;
      width: 245px;
      border: 7px solid #0a1720;
      background: #0a1720;
      box-shadow: 0 25px 55px rgba(0, 0, 0, .42);
      transform: rotate(2.2deg);
    }
    .web-video-lessons-page .route-window__bar{
      min-height: 30px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 0 7px;
      color: #a9bdc6;
      font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
      font-size: 7px;
      letter-spacing: .08em;
      text-transform: uppercase;
    }
    .web-video-lessons-page .route-window__bar span:last-child{ color: var(--ice); }
    .web-video-lessons-page .route-window img{
      width: 100%;
      height: 275px;
      object-fit: cover;
      object-position: 52% center;
      filter: saturate(.72) contrast(1.05);
    }
    .web-video-lessons-page .console-note{
      position: absolute;
      z-index: 4;
      bottom: 42px;
      left: -18px;
      width: 245px;
      padding: 15px 17px;
      border-left: 3px solid var(--ice);
      color: #b9c9d1;
      background: #152f40;
      font-size: 11px;
      line-height: 1.45;
      box-shadow: 0 16px 34px rgba(0, 0, 0, .22);
    }
    .web-video-lessons-page .console-note strong{
      display: flex;
      align-items: center;
      gap: 8px;
      margin-bottom: 4px;
      color: #fff;
      font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
      font-size: 9px;
      letter-spacing: .09em;
      text-transform: uppercase;
    }
    .web-video-lessons-page .console-note strong::before{
      content: "";
      width: 7px;
      height: 7px;
      background: #72d1b6;
      border-radius: 50%;
      box-shadow: 0 0 0 4px rgba(114, 209, 182, .11);
    }
    .web-video-lessons-page .console-axis{
      position: absolute;
      z-index: 2;
      right: 4px;
      bottom: 10px;
      left: 0;
      height: 1px;
      background: rgba(172, 210, 230, .38);
    }
    .web-video-lessons-page .console-axis::before,.web-video-lessons-page .console-axis::after{
      content: "";
      position: absolute;
      top: -4px;
      width: 9px;
      height: 9px;
      background: var(--ice);
    }
    .web-video-lessons-page .console-axis::before{ left: 0; }
    .web-video-lessons-page .console-axis::after{ right: 0; }

    .web-video-lessons-page .course-strip{
      position: relative;
      z-index: 4;
      color: var(--ink);
      border-bottom: 1px solid #aebfc5;
      background: #dfe7e8;
    }
    .web-video-lessons-page .course-strip__inner{
      display: grid;
      grid-template-columns: repeat(4, minmax(0, 1fr));
      border-left: 1px solid #aebfc5;
    }
    .web-video-lessons-page .course-route{
      min-height: 102px;
      display: grid;
      grid-template-columns: 34px minmax(0, 1fr) 16px;
      align-items: center;
      gap: 10px;
      padding: 17px 17px;
      border-right: 1px solid #aebfc5;
      transition: color .18s ease, background .18s ease;
    }
    .web-video-lessons-page .course-route:hover,.web-video-lessons-page .course-route:focus-visible{
      color: #fff;
      background: var(--blue-deep);
    }
    .web-video-lessons-page .course-route__no{
      color: var(--blue);
      font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
      font-size: 10px;
      letter-spacing: .1em;
    }
    .web-video-lessons-page .course-route:hover .course-route__no,.web-video-lessons-page .course-route:focus-visible .course-route__no{ color: var(--ice); }
    .web-video-lessons-page .course-route strong{
      display: block;
      margin-bottom: 3px;
      font-family: "PS Display", Arial, sans-serif;
      font-size: 16px;
      font-weight: 500;
      line-height: 1.15;
    }
    .web-video-lessons-page .course-route small{
      display: block;
      color: var(--muted);
      font-size: 9px;
      line-height: 1.35;
    }
    .web-video-lessons-page .course-route:hover small,.web-video-lessons-page .course-route:focus-visible small{ color: #c6d5dc; }
    .web-video-lessons-page .course-route__arrow{ color: var(--blue); font-size: 18px; }
    .web-video-lessons-page .course-route:hover .course-route__arrow,.web-video-lessons-page .course-route:focus-visible .course-route__arrow{ color: var(--ice); }

    .web-video-lessons-page .course{
      padding: clamp(76px, 8vw, 126px) 0;
    }
    .web-video-lessons-page .course__head{
      max-width: 920px;
      margin-bottom: 42px;
    }
    .web-video-lessons-page .course__head-row{
      display: flex;
      align-items: end;
      justify-content: space-between;
      gap: 32px;
    }
    .web-video-lessons-page .section-kicker{
      margin: 0 0 12px;
      color: var(--blue);
      font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
      font-size: 9px;
      letter-spacing: .12em;
      text-transform: uppercase;
    }
    .web-video-lessons-page .course__head h2,.web-video-lessons-page .outcomes h2,.web-video-lessons-page .next-step h2{
      margin: 0;
      font-family: "PS Display", Arial, sans-serif;
      font-size: clamp(36px, 4vw, 62px);
      font-weight: 500;
      line-height: 1;
      letter-spacing: -.02em;
    }
    .web-video-lessons-page .course__head > p{
      max-width: 700px;
      margin: 19px 0 0;
      color: var(--muted);
    }
    .web-video-lessons-page .course-switch{
      flex: 0 0 auto;
      display: grid;
      grid-template-columns: auto auto;
      border: 1px solid var(--line);
      font-size: 10px;
      letter-spacing: .04em;
      text-transform: uppercase;
    }
    .web-video-lessons-page .course-switch span,.web-video-lessons-page .course-switch a{
      min-height: 42px;
      display: inline-flex;
      align-items: center;
      padding: 0 15px;
    }
    .web-video-lessons-page .course-switch span{ color: #fff; background: var(--blue-deep); }
    .web-video-lessons-page .course-switch a{ color: var(--muted); background: #e5ebeb; }
    .web-video-lessons-page .course-switch a:hover{ color: #fff; background: var(--night); }
    .web-video-lessons-page .course-layout{
      display: grid;
      grid-template-columns: 320px minmax(0, 1fr);
      align-items: start;
      gap: clamp(28px, 4vw, 62px);
    }
    .web-video-lessons-page .playlist{
      position: sticky;
      top: calc(var(--header) + 24px);
      border-top: 4px solid var(--night);
      background: #e3e9e9;
    }
    .web-video-lessons-page .playlist__head{
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 16px;
      padding: 16px 17px 14px;
      border-right: 1px solid var(--line);
      border-bottom: 1px solid var(--line);
      border-left: 1px solid var(--line);
    }
    .web-video-lessons-page .playlist__head span{
      color: var(--muted);
      font-size: 9px;
      letter-spacing: .09em;
      text-transform: uppercase;
    }
    .web-video-lessons-page .playlist__head strong{
      color: var(--blue);
      font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
      font-size: 10px;
      font-weight: 500;
    }
    .web-video-lessons-page .playlist__track{
      height: 3px;
      overflow: hidden;
      background: #c8d3d6;
    }
    .web-video-lessons-page .playlist__track span{
      display: block;
      width: 25%;
      height: 100%;
      background: var(--blue);
      transition: width .25s ease;
    }
    .web-video-lessons-page .lesson-tab{
      width: 100%;
      min-height: 86px;
      display: grid;
      grid-template-columns: 40px minmax(0, 1fr) 20px;
      align-items: center;
      gap: 12px;
      padding: 14px 16px;
      border: 0;
      border-right: 1px solid var(--line);
      border-bottom: 1px solid var(--line);
      border-left: 1px solid var(--line);
      background: transparent;
      text-align: left;
      cursor: pointer;
      transition: color .18s ease, background .18s ease;
    }
    .web-video-lessons-page .lesson-tab:hover{ background: #f5f7f6; }
    .web-video-lessons-page .lesson-tab.is-active{
      color: #fff;
      border-color: var(--blue-deep);
      background: var(--blue-deep);
    }
    .web-video-lessons-page .lesson-tab__no{
      color: var(--blue);
      font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
      font-size: 10px;
    }
    .web-video-lessons-page .lesson-tab.is-active .lesson-tab__no{ color: var(--ice); }
    .web-video-lessons-page .lesson-tab strong{
      display: block;
      font-family: "PS Display", Arial, sans-serif;
      font-size: 15px;
      font-weight: 500;
      line-height: 1.18;
    }
    .web-video-lessons-page .lesson-tab small{
      display: block;
      margin-top: 4px;
      color: var(--muted);
      font-size: 9px;
      letter-spacing: .04em;
      text-transform: uppercase;
    }
    .web-video-lessons-page .lesson-tab.is-active small{ color: #bcd0da; }
    .web-video-lessons-page .lesson-tab__play{
      width: 19px;
      height: 19px;
      display: grid;
      place-items: center;
      border: 1px solid currentColor;
      border-radius: 50%;
      font-size: 7px;
    }
    .web-video-lessons-page .playlist__docs{
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 14px;
      padding: 15px 17px;
      color: #d7e4e9;
      background: var(--night);
      font-size: 10px;
    }
    .web-video-lessons-page .playlist__docs:hover{ color: #fff; background: var(--night-soft); }

    .web-video-lessons-page .lesson-stage{
      min-width: 0;
      border-top: 4px solid var(--blue);
      background: var(--white);
      box-shadow: 8px 8px 0 #ccd5d6;
    }
    .web-video-lessons-page .lesson-stage__top{
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 20px;
      padding: 17px 22px;
      border-right: 1px solid var(--line);
      border-bottom: 1px solid var(--line);
      border-left: 1px solid var(--line);
    }
    .web-video-lessons-page .lesson-stage__meta{
      display: flex;
      align-items: center;
      gap: 12px;
      color: var(--muted);
      font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
      font-size: 9px;
      letter-spacing: .08em;
      text-transform: uppercase;
    }
    .web-video-lessons-page .lesson-stage__meta strong{ color: var(--blue); font-weight: 500; }
    .web-video-lessons-page .external-video{
      display: inline-flex;
      align-items: center;
      gap: 8px;
      color: var(--blue-deep);
      font-size: 10px;
      font-weight: 500;
    }
    .web-video-lessons-page .external-video:hover{ color: var(--blue); }
    .web-video-lessons-page .lesson-stage__title{
      padding: clamp(24px, 3.5vw, 46px);
      border-right: 1px solid var(--line);
      border-bottom: 1px solid var(--line);
      border-left: 1px solid var(--line);
    }
    .web-video-lessons-page .lesson-stage__title h3{
      max-width: 900px;
      margin: 0;
      font-family: "PS Display", Arial, sans-serif;
      font-size: clamp(31px, 3.5vw, 52px);
      font-weight: 500;
      line-height: 1;
      letter-spacing: -.02em;
    }
    .web-video-lessons-page .lesson-stage__title p{
      max-width: 850px;
      margin: 17px 0 0;
      color: var(--muted);
      font-size: 15px;
    }
    .web-video-lessons-page .player{
      position: relative;
      aspect-ratio: 16 / 9;
      overflow: hidden;
      background: #07131b;
    }
    .web-video-lessons-page .player iframe{
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
      border: 0;
    }
    .web-video-lessons-page .player-loader{
      position: absolute;
      z-index: 2;
      inset: 0;
      display: grid;
      place-items: center;
      color: #c4d5dc;
      background: #07131b;
      opacity: 0;
      visibility: hidden;
      transition: opacity .2s ease, visibility .2s ease;
      pointer-events: none;
    }
    .web-video-lessons-page .player-loader.is-visible{ opacity: 1; visibility: visible; }
    .web-video-lessons-page .player-loader span{
      width: 38px;
      height: 38px;
      border: 2px solid rgba(172, 210, 230, .25);
      border-top-color: var(--ice);
      border-radius: 50%;
      animation: rotate .8s linear infinite;
    }
    @keyframes rotate { to { transform: rotate(360deg); } }
    .web-video-lessons-page .lesson-detail{
      display: grid;
      grid-template-columns: minmax(0, .72fr) minmax(330px, 1fr);
      gap: clamp(28px, 4vw, 60px);
      padding: clamp(26px, 4vw, 50px);
      border-right: 1px solid var(--line);
      border-left: 1px solid var(--line);
    }
    .web-video-lessons-page .lesson-result{
      align-self: start;
      padding-left: 17px;
      border-left: 3px solid var(--blue);
    }
    .web-video-lessons-page .lesson-result span{
      display: block;
      margin-bottom: 8px;
      color: var(--blue);
      font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
      font-size: 9px;
      letter-spacing: .1em;
      text-transform: uppercase;
    }
    .web-video-lessons-page .lesson-result p{ margin: 0; color: #31434c; }
    .web-video-lessons-page .lesson-points{
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 0 22px;
      margin: 0;
      padding: 0;
      list-style: none;
      counter-reset: lesson-point;
    }
    .web-video-lessons-page .lesson-points li{
      position: relative;
      min-height: 70px;
      padding: 13px 0 13px 35px;
      border-top: 1px solid var(--line);
      color: #42535b;
      font-size: 13px;
      counter-increment: lesson-point;
    }
    .web-video-lessons-page .lesson-points li::before{
      content: counter(lesson-point, decimal-leading-zero);
      position: absolute;
      top: 14px;
      left: 0;
      color: var(--blue);
      font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
      font-size: 9px;
    }
    .web-video-lessons-page .lesson-nav{
      display: grid;
      grid-template-columns: 1fr 1fr;
      border: 1px solid var(--line);
    }
    .web-video-lessons-page .lesson-nav button{
      min-height: 62px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 16px;
      padding: 13px 20px;
      border: 0;
      background: #e5ebeb;
      cursor: pointer;
      transition: color .18s ease, background .18s ease;
    }
    .web-video-lessons-page .lesson-nav button + button{ border-left: 1px solid var(--line); }
    .web-video-lessons-page .lesson-nav button:hover:not(:disabled){ color: #fff; background: var(--blue-deep); }
    .web-video-lessons-page .lesson-nav button:disabled{ color: #9ba8ad; cursor: default; }
    .web-video-lessons-page .lesson-nav small{
      display: block;
      color: var(--muted);
      font-size: 8px;
      letter-spacing: .08em;
      text-transform: uppercase;
    }
    .web-video-lessons-page .lesson-nav button:hover:not(:disabled) small{ color: #bfd3dc; }
    .web-video-lessons-page .lesson-nav strong{
      display: block;
      margin-top: 2px;
      font-family: "PS Display", Arial, sans-serif;
      font-size: 15px;
      font-weight: 500;
    }
    .web-video-lessons-page .lesson-nav__next{ text-align: right; }

    .web-video-lessons-page .outcomes{
      padding: clamp(70px, 8vw, 112px) 0;
      color: #fff;
      background: var(--night-soft);
    }
    .web-video-lessons-page .outcomes__head{
      display: grid;
      grid-template-columns: minmax(0, .85fr) minmax(380px, .7fr);
      align-items: end;
      gap: 60px;
      margin-bottom: 48px;
    }
    .web-video-lessons-page .outcomes__head p{
      margin: 0;
      color: #b5c5cc;
    }
    .web-video-lessons-page .outcome-grid{
      display: grid;
      grid-template-columns: repeat(4, minmax(0, 1fr));
      border-top: 1px solid rgba(172, 210, 230, .28);
      border-left: 1px solid rgba(172, 210, 230, .28);
    }
    .web-video-lessons-page .outcome{
      min-height: 270px;
      display: flex;
      flex-direction: column;
      padding: clamp(22px, 2.5vw, 36px);
      border-right: 1px solid rgba(172, 210, 230, .28);
      border-bottom: 1px solid rgba(172, 210, 230, .28);
    }
    .web-video-lessons-page .outcome__no{
      margin-bottom: auto;
      color: var(--ice);
      font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
      font-size: 10px;
      letter-spacing: .1em;
    }
    .web-video-lessons-page .outcome h3{
      margin: 42px 0 9px;
      font-family: "PS Display", Arial, sans-serif;
      font-size: 23px;
      font-weight: 500;
      line-height: 1.05;
    }
    .web-video-lessons-page .outcome p{ margin: 0; color: #aebfc7; font-size: 13px; }

    .web-video-lessons-page .next-step{
      padding: clamp(70px, 8vw, 118px) 0;
      background: #d7e3e6;
    }
    .web-video-lessons-page .next-step__inner{
      display: grid;
      grid-template-columns: minmax(0, 1fr) auto;
      align-items: center;
      gap: 50px;
    }
    .web-video-lessons-page .next-step p{
      max-width: 720px;
      margin: 17px 0 0;
      color: #53676f;
    }
    .web-video-lessons-page .next-step__actions{ display: flex; flex-wrap: wrap; gap: 10px; }
    .web-video-lessons-page .next-step .action--primary{ color: #fff; border-color: var(--blue-deep); background: var(--blue-deep); }
    .web-video-lessons-page .next-step .action--primary:hover{ background: var(--blue); }
    .web-video-lessons-page .next-step .action--secondary{ border-color: #8fa8b2; }
    .web-video-lessons-page .next-step .action--secondary:hover{ color: #fff; border-color: var(--night); background: var(--night); }

    .web-video-lessons-page .site-footer{
      color: #d3dee3;
      border-top: 3px solid var(--blue);
      background: var(--night);
    }
    .web-video-lessons-page .footer-main{
      display: grid;
      grid-template-columns: 1.2fr .8fr .8fr;
      gap: 50px;
      padding-top: 52px;
      padding-bottom: 48px;
    }
    .web-video-lessons-page .footer-col{ display: grid; align-content: start; gap: 9px; font-size: 12px; }
    .web-video-lessons-page .footer-col h3{
      margin: 0 0 7px;
      color: var(--ice);
      font-family: "PS Display", Arial, sans-serif;
      font-size: 15px;
      font-weight: 500;
    }
    .web-video-lessons-page .footer-col a{ color: #aebec6; }
    .web-video-lessons-page .footer-col a:hover{ color: #fff; }
    .web-video-lessons-page .footer-bottom{
      min-height: 52px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 20px;
      border-top: 1px solid rgba(172, 210, 230, .18);
      color: #8499a3;
      font-size: 9px;
      letter-spacing: .06em;
      text-transform: uppercase;
    }

    @media (max-width: 1180px) {
      .web-video-lessons-page .main-nav > a{ padding-inline: 9px; }
      .web-video-lessons-page .main-nav > a::after{ right: 9px; left: 9px; }
      .web-video-lessons-page .hero__inner{ grid-template-columns: minmax(0, 1fr) 430px; gap: 42px; }
      .web-video-lessons-page .course-layout{ grid-template-columns: 285px minmax(0, 1fr); gap: 28px; }
      .web-video-lessons-page .course-route{ padding-inline: 13px; }
      .web-video-lessons-page .course-route small{ display: none; }
    }

    @media (max-width: 940px) {
      .web-video-lessons-page{ --header: 58px; }
      .web-video-lessons-page .site-header{ position: absolute; }
      .web-video-lessons-page .header__inner{ gap: 18px; }
      .web-video-lessons-page .menu-toggle{ display: block; }
      .web-video-lessons-page .main-nav{
        position: fixed;
        top: var(--header);
        right: 0;
        left: 0;
        max-height: calc(100vh - var(--header));
        display: none;
        overflow-y: auto;
        margin: 0;
        padding: 12px var(--gutter) 22px;
        background: var(--night);
        box-shadow: 0 18px 30px rgba(0, 0, 0, .26);
      }
      .web-video-lessons-page .main-nav.is-open{ display: grid; }
      .web-video-lessons-page .main-nav > a{
        min-height: 50px;
        padding: 0 7px;
        border-bottom: 1px solid rgba(172, 210, 230, .14);
      }
      .web-video-lessons-page .main-nav > a::after{ display: none; }
      .web-video-lessons-page .header__back{
        min-height: 46px !important;
        margin-top: 10px;
        padding-inline: 13px !important;
        border: 1px solid rgba(172, 210, 230, .35);
      }
      .web-video-lessons-page .hero__inner{
        min-height: auto;
        grid-template-columns: 1fr;
        padding-top: calc(var(--header) + 76px);
        padding-bottom: 68px;
      }
      .web-video-lessons-page .web-console{
        width: min(650px, 100%);
        min-height: 500px;
        margin-inline: auto;
      }
      .web-video-lessons-page .course-strip__inner{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
      .web-video-lessons-page .course-route{ border-bottom: 1px solid #aebfc5; }
      .web-video-lessons-page .course-route small{ display: block; }
      .web-video-lessons-page .course-layout{ grid-template-columns: 1fr; }
      .web-video-lessons-page .playlist{
        position: static;
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
      }
      .web-video-lessons-page .playlist__head,.web-video-lessons-page .playlist__track,.web-video-lessons-page .playlist__docs{ grid-column: 1 / -1; }
      .web-video-lessons-page .lesson-tab{
        min-height: 104px;
        grid-template-columns: 28px minmax(0, 1fr);
        align-content: center;
      }
      .web-video-lessons-page .lesson-tab__play{ display: none; }
      .web-video-lessons-page .lesson-detail{ grid-template-columns: 1fr; }
      .web-video-lessons-page .outcomes__head{ grid-template-columns: 1fr; gap: 20px; }
      .web-video-lessons-page .outcome-grid{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
      .web-video-lessons-page .next-step__inner{ grid-template-columns: 1fr; }
    }

    @media (max-width: 700px) {
      .web-video-lessons-page{ --gutter: 18px; }
      .web-video-lessons-page .brand__meta{ display: none; }
      .web-video-lessons-page .hero{ min-height: auto; }
      .web-video-lessons-page .hero__inner{ gap: 34px; padding-top: calc(var(--header) + 58px); padding-bottom: 54px; }
      .web-video-lessons-page .hero h1{ font-size: clamp(45px, 13vw, 66px); }
      .web-video-lessons-page .hero__lead{ font-size: 15px; }
      .web-video-lessons-page .hero__actions{ display: grid; }
      .web-video-lessons-page .action{ width: 100%; }
      .web-video-lessons-page .hero__stats{ margin-top: 32px; }
      .web-video-lessons-page .hero-stat{ min-width: 0; padding-right: 12px; }
      .web-video-lessons-page .hero-stat + .hero-stat{ padding-left: 12px; }
      .web-video-lessons-page .hero-stat strong{ font-size: 24px; }
      .web-video-lessons-page .web-console{ min-height: 390px; }
      .web-video-lessons-page .browser-frame{ top: 16px; }
      .web-video-lessons-page .browser-crop{ height: 235px; }
      .web-video-lessons-page .route-window{ right: 9px; bottom: 18px; width: 183px; }
      .web-video-lessons-page .route-window img{ height: 195px; }
      .web-video-lessons-page .console-note{ bottom: 35px; left: -5px; width: 192px; padding: 11px 12px; font-size: 9px; }
      .web-video-lessons-page .course-strip__inner{ grid-template-columns: 1fr; }
      .web-video-lessons-page .course-route{ min-height: 78px; grid-template-columns: 31px minmax(0, 1fr) 15px; padding: 14px 13px; }
      .web-video-lessons-page .course-route strong{ font-size: 15px; }
      .web-video-lessons-page .course{ padding-block: 68px; }
      .web-video-lessons-page .course__head{ margin-bottom: 30px; }
      .web-video-lessons-page .course__head-row{ align-items: stretch; flex-direction: column; gap: 24px; }
      .web-video-lessons-page .course-switch{ align-self: flex-start; }
      .web-video-lessons-page .playlist{ grid-template-columns: 1fr; }
      .web-video-lessons-page .playlist__head,.web-video-lessons-page .playlist__track,.web-video-lessons-page .playlist__docs{ grid-column: auto; }
      .web-video-lessons-page .playlist__track{ order: 2; }
      .web-video-lessons-page .lesson-tab{ min-height: 72px; grid-template-columns: 34px minmax(0, 1fr) 18px; }
      .web-video-lessons-page .lesson-tab__play{ display: grid; }
      .web-video-lessons-page .lesson-stage{ box-shadow: 5px 5px 0 #ccd5d6; }
      .web-video-lessons-page .lesson-stage__top{ align-items: flex-start; padding: 14px 15px; }
      .web-video-lessons-page .lesson-stage__meta{ display: grid; gap: 3px; }
      .web-video-lessons-page .external-video span{ display: none; }
      .web-video-lessons-page .lesson-stage__title{ padding: 24px 18px; }
      .web-video-lessons-page .lesson-stage__title h3{ font-size: 34px; }
      .web-video-lessons-page .lesson-detail{ padding: 24px 18px; }
      .web-video-lessons-page .lesson-points{ grid-template-columns: 1fr; }
      .web-video-lessons-page .lesson-nav{ grid-template-columns: 1fr; }
      .web-video-lessons-page .lesson-nav button + button{ border-top: 1px solid var(--line); border-left: 0; }
      .web-video-lessons-page .outcome-grid{ grid-template-columns: 1fr; }
      .web-video-lessons-page .outcome{ min-height: 205px; }
      .web-video-lessons-page .next-step__actions{ display: grid; }
      .web-video-lessons-page .footer-main{ grid-template-columns: 1fr; gap: 32px; }
      .web-video-lessons-page .footer-bottom{ align-items: flex-start; flex-direction: column; justify-content: center; padding-block: 15px; }
    }

    @media (max-width: 420px) {
      .web-video-lessons-page .web-console{ min-height: 335px; }
      .web-video-lessons-page .browser-crop{ height: 205px; }
      .web-video-lessons-page .route-window{ width: 155px; }
      .web-video-lessons-page .route-window img{ height: 165px; }
      .web-video-lessons-page .console-note{ width: 165px; }
      .web-video-lessons-page .hero__stats{ display: grid; grid-template-columns: repeat(3, 1fr); }
      .web-video-lessons-page .hero-stat{ padding: 0 7px !important; text-align: center; }
    }

    @media (prefers-reduced-motion: reduce) {
      .web-video-lessons-page{ scroll-behavior: auto; }
      .web-video-lessons-page *,.web-video-lessons-page *::before,.web-video-lessons-page *::after{ scroll-behavior: auto !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
    }