:root{
      --bg:#080808;
      --text:#f3f3ef;
      --muted:rgba(255,255,255,.64);
      --line:rgba(255,255,255,.15);
      --accent:#ff3d23;
      --radius:28px;
      --ease:cubic-bezier(.18,.78,.2,1);
    }

    *{box-sizing:border-box}
    html,body{width:100%;height:100%;margin:0;overflow:hidden;background:var(--bg)}
    body{font-family:Arial,Helvetica,sans-serif;color:var(--text)}
    button,a{font:inherit;color:inherit}
    button{cursor:pointer}
    a{text-decoration:none}

    .app{
      width:100%;
      height:100%;
      padding:18px;
      background:
        radial-gradient(circle at 85% 15%,rgba(130,12,6,.22),transparent 35%),
        #070707;
    }

    .stage{
      position:relative;
      width:100%;
      height:100%;
      overflow:hidden;
      border:1px solid var(--line);
      border-radius:var(--radius);
      background:#090909;
      isolation:isolate;
    }

    .hero{
      position:absolute;
      inset:0;
      background:
        linear-gradient(90deg,rgba(0,0,0,.88) 0%,rgba(0,0,0,.48) 35%,rgba(0,0,0,.08) 68%,rgba(0,0,0,.46) 100%),
        linear-gradient(0deg,rgba(0,0,0,.8),transparent 48%),
        url("https://images.unsplash.com/photo-1492684223066-81342ee5ff30?auto=format&fit=crop&w=2200&q=85") center 32%/cover no-repeat;
      transform:scale(1.02);
      transition:transform .9s var(--ease),filter .75s var(--ease);
      z-index:-2;
    }

    .stage.work-open .hero{transform:scale(1.08);filter:brightness(.54)}
    .vignette{position:absolute;inset:0;pointer-events:none;box-shadow:inset 0 0 170px rgba(0,0,0,.5);z-index:5}

    header{
      position:absolute;
      top:0;left:0;right:0;
      min-height:108px;
      display:grid;
      grid-template-columns:1fr auto 1fr;
      align-items:start;
      padding:30px 42px 0;
      z-index:20;
      background:linear-gradient(180deg,rgba(0,0,0,.72) 0%,rgba(0,0,0,.34) 58%,transparent 100%);
    }

    .logo{
      font-family:Impact,"Arial Narrow",sans-serif;
      font-size:34px;
      letter-spacing:.08em;
      line-height:1;
    }

    nav{
      display:flex;
      gap:34px;
      padding-top:4px;
      font-size:11px;
      letter-spacing:.18em;
      text-transform:uppercase;
    }

    nav button{
      border:0;
      background:none;
      padding:8px 0;
      opacity:.9;
      position:relative;
    }

    nav button:hover,nav button.active{opacity:1}
    nav button.active:after{
      content:"";
      position:absolute;
      left:0;right:0;bottom:0;
      height:1px;background:#fff;
    }

    .menu{
      justify-self:end;
      border:0;
      background:none;
      padding:4px 0;
      min-width:32px;
      display:flex;
      flex-direction:column;
      align-items:flex-end;
      gap:6px;
    }
    .menu span{display:block;height:1px;background:#fff;transition:.25s}
    .menu span:first-child{width:26px}
    .menu span:last-child{width:16px}
    .menu:hover span:last-child{width:26px}

    .socials{
      position:absolute;
      left:34px;
      top:50%;
      transform:translateY(-50%);
      display:flex;
      flex-direction:column;
      gap:44px;
      z-index:14;
      padding:22px 12px;
      border-radius:18px;
      background:linear-gradient(90deg,rgba(0,0,0,.68),rgba(0,0,0,.26));
      backdrop-filter:blur(5px);
    }
    .socials a{
      width:22px;height:22px;
      display:grid;place-items:center;
      opacity:.94;
      transition:opacity .25s,transform .25s;
    }
    .socials a:hover{opacity:1;transform:scale(1.12)}
    .socials svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}

    .intro{
      position:absolute;
      left:13%;
      top:47%;
      transform:translateY(-50%);
      max-width:680px;
      z-index:10;
      transition:.7s var(--ease);
    }
    .stage.work-open .intro{transform:translateY(-72%) scale(.9);opacity:.25}

    .intro h1{
      margin:0;
      font-family:Impact,"Arial Narrow",sans-serif;
      font-size:clamp(74px,8.2vw,148px);
      line-height:.84;
      letter-spacing:-.025em;
      text-transform:uppercase;
      font-weight:500;
    }

    .roles{
      display:flex;
      flex-wrap:wrap;
      gap:12px;
      margin-top:28px;
      text-transform:uppercase;
      font-size:12px;
      letter-spacing:.09em;
    }
    .roles span:not(:last-child):after{content:"•";margin-left:12px;opacity:.4}
    .tags{margin-top:16px;color:var(--muted);font-size:14px}

    .showreel{
      margin-top:30px;
      border:0;
      background:none;
      padding:0;
      display:inline-flex;
      align-items:center;
      gap:14px;
      text-transform:uppercase;
      letter-spacing:.08em;
      font-size:12px;
    }
    .play-ring{
      width:38px;height:38px;border:1px solid rgba(255,255,255,.72);
      border-radius:50%;
      display:grid;place-items:center;
      transition:.25s;
    }
    .showreel:hover .play-ring{transform:scale(1.08);background:rgba(255,255,255,.1)}

    .scroll-indicator{
      position:absolute;
      right:28px;
      top:50%;
      transform:translateY(-50%);
      display:flex;
      flex-direction:column;
      align-items:center;
      gap:12px;
      z-index:13;
    }
    .scroll-indicator span{
      writing-mode:vertical-rl;
      font-size:9px;
      letter-spacing:.18em;
      text-transform:uppercase;
      opacity:.65;
    }
    .scroll-line{width:1px;height:78px;background:rgba(255,255,255,.25);position:relative}
    .scroll-dot{
      position:absolute;
      left:50%;top:0;
      transform:translateX(-50%);
      width:10px;height:10px;
      border:1px solid #fff;border-radius:50%;background:#111;
      transition:top .5s var(--ease)
    }

    .work-panel{
      position:absolute;
      left:0;right:0;bottom:0;
      height:48%;
      padding:26px 40px 46px;
      background:linear-gradient(180deg,rgba(7,7,7,.02),rgba(7,7,7,.9) 14%,rgba(7,7,7,.99));
      transform:translateY(76%);
      transition:transform .8s var(--ease);
      z-index:30;
    }
    .stage.work-open .work-panel{transform:translateY(0)}

    .work-head{
      display:flex;
      justify-content:space-between;
      align-items:center;
      margin-bottom:24px;
    }
    .work-head h2{
      margin:0;
      font-family:Impact,"Arial Narrow",sans-serif;
      font-size:18px;
      letter-spacing:.13em;
      font-weight:400;
      text-transform:uppercase;
    }

    .filters{display:none}
    .filters button{
      border:0;background:none;padding:8px 0;
      color:var(--muted);
      font-size:10px;letter-spacing:.15em;text-transform:uppercase;
    }
    .filters button.active{color:#fff}

    .projects{
      display:grid;
      grid-auto-flow:column;
      grid-auto-columns:clamp(360px,30vw,470px);
      gap:14px;
      overflow-x:auto;
      overflow-y:hidden;
      padding:18px 26px 34px;
      scroll-padding-inline:26px;
      scrollbar-width:none;
      position:relative;
      z-index:40;
    }
    .projects::-webkit-scrollbar{display:none}

    .project{
      position:relative;
      aspect-ratio:16/9;
      padding:0;
      margin:0;
      appearance:none;
      -webkit-appearance:none;
      min-width:360px;
      overflow:hidden;
      border-radius:9px;
      border:0;
      background:#141414;
      transition:transform .28s var(--ease),box-shadow .28s var(--ease);
    }
    .project:hover{
      transform:scale(1.035);
      z-index:6;
      box-shadow:0 18px 45px rgba(0,0,0,.55);
    }

    .project img{
      width:100%;height:100%;object-fit:cover;
      display:block;
      transition:transform .55s var(--ease),filter .3s;
    }
    .project-preview{
      position:absolute;inset:0;
      width:100%;height:100%;
      object-fit:cover;
      opacity:0;
      transition:opacity .28s ease;
      z-index:1;
      pointer-events:none;
    }
    .project.previewing .project-preview{opacity:1}
    .project.previewing > img{opacity:0}
    .project:hover img{transform:scale(1.035);filter:brightness(.72)}

    .project:after{
      content:"";
      position:absolute;inset:0;
      background:linear-gradient(0deg,rgba(0,0,0,.9),transparent 68%);
    }

    .project-meta{
      position:absolute;
      left:20px;right:20px;bottom:16px;
      z-index:2;
      display:flex;
      align-items:flex-end;
      justify-content:center;
      gap:10px;
      text-align:center;
    }
    .project-title{
      font-family:Impact,"Arial Narrow",sans-serif;
      font-size:22px;
      letter-spacing:.04em;
      text-transform:uppercase;
    }
    .project-sub{
      margin-top:3px;
      font-size:10px;
      letter-spacing:.12em;
      text-transform:uppercase;
      color:rgba(255,255,255,.72)
    }
    .project-meta > div:first-child{max-width:78%}
    .mini-play{
      position:absolute;
      right:0;
      bottom:0;
      width:32px;height:32px;border:1px solid rgba(255,255,255,.75);
      border-radius:50%;display:grid;place-items:center;flex:none;
    }

    .detail{
      position:absolute;
      inset:0;
      background:#080808;
      opacity:0;visibility:hidden;
      transition:none;
      transform:none;
      z-index:110;
      display:block;
      padding:0;
    }
    .detail.open{opacity:1;visibility:visible;transform:none}

    .detail-top{
      position:absolute;
      top:0;left:0;right:0;
      height:92px;
      padding:24px 34px;
      display:flex;
      align-items:flex-start;
      justify-content:flex-end;
      z-index:8;
      pointer-events:none;
      background:none;
    }
    .detail-top .detail-close{pointer-events:auto}
    .detail-close{
      border:0;
      background:none;
      font-size:38px;
      line-height:1;
      padding:0;
    }

    .video-wide{
      position:absolute;
      inset:0;
      border-radius:0;
      overflow:hidden;
      background:#111;
    }
    .video-wide img{
      width:100%;height:100%;
      object-fit:cover;
      display:block;
      filter:brightness(.78);
    }
    .video-wide:after{
      content:"";
      position:absolute;inset:0;
      background:
        linear-gradient(90deg,rgba(0,0,0,.72) 0%,rgba(0,0,0,.18) 42%,transparent 68%),
        linear-gradient(0deg,rgba(0,0,0,.92) 0%,rgba(0,0,0,.32) 38%,transparent 66%);
    }

    .video-wide video{
      position:absolute;
      inset:0;
      width:100%;
      height:100%;
      object-fit:cover;
      z-index:1;
      background:#000;
    }
    .video-wide.video-active:after{pointer-events:none;opacity:.18}
    .video-wide.video-active .center-play,
    .video-wide.video-active .controls,
    .video-wide.video-active > img{display:none}

    .next-video{
      position:absolute;
      right:34px;
      top:50%;
      transform:translateY(-50%);
      z-index:9;
      border:1px solid rgba(255,255,255,.38);
      background:rgba(0,0,0,.52);
      color:#fff;
      border-radius:999px;
      padding:13px 18px;
      text-transform:uppercase;
      letter-spacing:.14em;
      font-size:10px;
      backdrop-filter:blur(8px);
      transition:background .25s,transform .25s;
    }
    .next-video:hover{background:rgba(255,255,255,.16);transform:translateY(-50%) translateX(3px)}

    .center-play{
      position:absolute;left:50%;top:50%;
      transform:translate(-50%,-50%);
      z-index:3;
      width:76px;height:76px;
      border-radius:50%;
      border:1px solid rgba(255,255,255,.8);
      background:rgba(0,0,0,.24);
      display:grid;place-items:center;
      font-size:24px;
      backdrop-filter:blur(8px);
    }

    .controls{
      position:absolute;
      left:28px;right:28px;bottom:22px;
      z-index:3;
      display:grid;
      grid-template-columns:auto auto 1fr auto auto;
      align-items:center;
      gap:14px;
      font-size:11px;
    }
    .bar{height:2px;background:rgba(255,255,255,.35);position:relative}
    .bar:before{content:"";position:absolute;left:0;top:0;bottom:0;width:36%;background:#fff}

    .detail-info{
      position:absolute;
      left:0;right:0;bottom:72px;
      z-index:7;
      display:flex;
      align-items:flex-end;
      justify-content:space-between;
      gap:36px;
      padding:0 42px;
      pointer-events:none;
    }
    .detail-info h3{
      margin:0 0 6px;
      font-family:Impact,"Arial Narrow",sans-serif;
      font-size:34px;
      letter-spacing:.04em;
      text-transform:uppercase;
      font-weight:400;
    }
    .detail-info p{
      margin:0;
      color:var(--muted);
      font-size:13px;
    }
    .compact-credits{
      display:flex;
      gap:30px;
      padding-top:6px;
      text-align:right;
      font-size:11px;
      color:var(--muted);
    }
    .compact-credits strong{display:block;color:#fff;margin-bottom:4px;text-transform:uppercase;font-size:10px;letter-spacing:.1em}

    .about{
      position:absolute;inset:0;
      background:#070707;
      backdrop-filter:none;
      z-index:100;
      opacity:0;visibility:hidden;
      transition:none;
      display:grid;
      place-items:center;
      padding:90px 10vw;
    }
    .about.open{opacity:1;visibility:visible}
    .about-grid{display:grid;grid-template-columns:1.2fr .8fr;gap:8vw;align-items:center}
    .about h2{
      margin:0;
      font-family:Impact,"Arial Narrow",sans-serif;
      font-size:clamp(70px,8vw,140px);
      line-height:.82;
      text-transform:uppercase;
      font-weight:400;
    }
    .about p{color:var(--muted);line-height:1.8}
    .about-close{position:absolute;right:36px;top:28px}

    @media(max-width:900px){
      header{grid-template-columns:1fr auto;padding:26px 22px 0;min-height:88px}
      nav{display:none}
      .intro{left:10%;top:44%}
      .intro h1{font-size:clamp(58px,16vw,108px)}
      .socials{display:none}
      .work-panel{height:52%;padding:22px 20px 38px}
      .filters{display:none}
      .projects{grid-auto-columns:84vw;gap:12px;padding-left:18px;padding-right:18px}
      .detail{padding:0}
      .detail-info{left:0;right:0;bottom:76px;flex-direction:column;align-items:flex-start;gap:10px;padding:0 22px}
      .compact-credits{text-align:left}
      .about-grid{grid-template-columns:1fr}
    }
  
    /* Final alignment pass */
    .projects{
      padding-left:0;
      padding-right:0;
      scroll-padding-inline:0;
    }
    .project:first-child{transform-origin:left center}
    .project:last-child{transform-origin:right center}
    .project-meta{
      left:20px;
      right:20px;
      justify-content:flex-start;
      text-align:left;
    }
    .project-meta > div:first-child{max-width:calc(100% - 48px)}
    .detail-info{
      left:28px;
      right:28px;
      padding:0;
    }
    .controls{left:28px;right:28px}
    .detail-top{padding-left:28px;padding-right:28px}
    .next-video{right:28px}

    /* Fullscreen menu and vertical work index */
    .menu-overlay{
      position:absolute;inset:0;z-index:105;
      background:#050505;backdrop-filter:none;
      opacity:0;visibility:hidden;transition:none;
      display:grid;place-items:center;
    }
    .menu-overlay.open{opacity:1;visibility:visible}
    .menu-close{position:absolute;right:38px;top:28px;border:0;background:none;font-size:40px;line-height:1}
    .menu-inner{text-align:center}
    .menu-links{display:flex;flex-direction:column;gap:18px}
    .menu-links button{border:0;background:none;font-family:Impact,"Arial Narrow",sans-serif;font-size:clamp(52px,7vw,108px);line-height:.95;text-transform:uppercase;letter-spacing:.035em;opacity:.72;transition:.25s}
    .menu-links button:hover{opacity:1;transform:translateX(6px)}
    .menu-socials{display:flex;justify-content:center;gap:28px;margin-top:42px}
    .menu-socials a{width:32px;height:32px;display:grid;place-items:center;opacity:.9}
    .menu-socials svg{width:21px;height:21px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}

    .work-index{
      position:absolute;inset:0;z-index:100;background:#070707;
      opacity:0;visibility:hidden;transition:none;
    }
    .work-index.open{opacity:1;visibility:visible}
    .work-index-close{position:absolute;right:38px;top:28px;z-index:4;border:0;background:none;font-size:40px;line-height:1}
    .work-index-label{position:absolute;left:42px;top:34px;z-index:4;font-family:Impact,"Arial Narrow",sans-serif;font-size:20px;letter-spacing:.13em;text-transform:uppercase}
    .work-index-list{height:100%;overflow-y:auto;scroll-snap-type:y mandatory;scrollbar-width:none}
    .work-index-list::-webkit-scrollbar{display:none}
    .work-index-item{height:100%;scroll-snap-align:center;display:grid;place-items:center;padding:86px 8vw 58px;border:0;background:none;width:100%;text-align:left}
    .work-index-card{position:relative;width:min(1120px,86vw);height:min(68vh,680px);overflow:hidden;border-radius:14px;background:#111}
    .work-index-card img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .6s var(--ease)}
    .work-index-item:hover img{transform:scale(1.025)}
    .work-index-card:after{content:"";position:absolute;inset:0;background:linear-gradient(0deg,rgba(0,0,0,.9),transparent 55%)}
    .work-index-meta{position:absolute;left:34px;right:34px;bottom:30px;z-index:2;display:flex;justify-content:space-between;align-items:flex-end;gap:24px}
    .work-index-title{font-family:Impact,"Arial Narrow",sans-serif;font-size:clamp(34px,5vw,74px);line-height:.95;text-transform:uppercase}
    .work-index-sub{margin-top:8px;font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:rgba(255,255,255,.72)}
    .work-index-count{font-size:11px;letter-spacing:.18em;color:rgba(255,255,255,.7)}

    .scroll-indicator{gap:0}
    .scroll-indicator span{display:none}

    @media(max-width:900px){
      .menu-close,.work-index-close{right:22px;top:20px}
      .work-index-label{left:22px;top:28px}
      .work-index-item{padding:76px 18px 36px}
      .work-index-card{width:100%;height:64vh}
      .work-index-meta{left:20px;right:20px;bottom:20px}
    }



/* WordPress theme additions */
html.wp-toolbar body{margin-top:0!important}
body.admin-bar .app{height:calc(100vh - 32px)}
@media(max-width:782px){body.admin-bar .app{height:calc(100vh - 46px)}}
.project{color:inherit}
.menu-overlay a,.socials a{color:#fff}
.video-embed{position:absolute;inset:0;width:100%;height:100%;border:0;z-index:1;background:#000}


/* === 1.5.0 — mobile app/video UX — FIXED === */
:root{--safe-top:env(safe-area-inset-top,0px);--safe-bottom:env(safe-area-inset-bottom,0px)}

@media(max-width:782px){
  /* WordPress admin bar is useful on desktop, but destroys the app feel on mobile */
  #wpadminbar{display:none!important}
  html{margin-top:0!important}
  body.admin-bar .app{height:100dvh!important}
}

@media(max-width:700px){
  html,body{width:100%;height:100%;margin:0!important;background:#000!important;overscroll-behavior:none}
  body{overflow:hidden!important}
  .app{width:100vw!important;height:100dvh!important;padding:0!important;background:#000!important}
  .stage{width:100vw!important;height:100dvh!important;border:0!important;border-radius:0!important;background:#070707!important;overflow:hidden!important}
  .vignette{box-shadow:inset 0 0 100px rgba(0,0,0,.38)}

  header{padding:calc(var(--safe-top) + 20px) 20px 0!important;min-height:84px!important;background:linear-gradient(180deg,rgba(0,0,0,.58),transparent)!important}
  .logo{font-size:31px!important}
  .intro{left:20px!important;right:20px!important;top:44%!important;max-width:none!important}
  .intro h1{font-size:clamp(56px,17vw,92px)!important;line-height:.88!important}
  .roles{gap:9px!important;margin-top:22px!important;font-size:10px!important}
  .roles span:not(:last-child):after{margin-left:9px!important}
  .tags{font-size:12px!important;line-height:1.45}
  .showreel{margin-top:25px!important}
  .scroll-indicator{right:16px!important}

  /* Home carousel: edge-to-edge app row, no desktop frame feeling */
  .work-panel{height:50%!important;padding:20px 0 calc(var(--safe-bottom) + 20px) 20px!important;background:linear-gradient(180deg,transparent,rgba(7,7,7,.94) 16%,#070707)!important}
  .work-head{margin-bottom:14px!important;padding-right:20px}
  .projects{grid-auto-columns:82vw!important;gap:10px!important;padding:0 20px 8px 0!important;overflow-x:auto!important}
  .project{min-width:82vw!important;border:0!important;border-radius:10px!important;transform:none!important}
  .project:hover{transform:none!important}
  .project-meta{left:16px!important;right:16px!important;bottom:14px!important}
  .project-title{font-size:20px!important}

  /* Work list and About are bottom sheets */
  .work-index,.about{
    position:fixed!important;left:0!important;right:0!important;bottom:0!important;top:auto!important;
    width:100vw!important;height:92dvh!important;z-index:600!important;background:#070707!important;
    border-radius:24px 24px 0 0!important;overflow:hidden!important;
    opacity:1!important;visibility:visible!important;pointer-events:none!important;
    transform:translateY(104%)!important;transition:transform .38s cubic-bezier(.18,.78,.2,1)!important;
    box-shadow:0 -28px 90px rgba(0,0,0,.55)!important
  }
  .work-index.open,.about.open{transform:translateY(0)!important;pointer-events:auto!important}
  .work-index:before,.about:before{content:"";position:absolute;left:50%;top:9px;transform:translateX(-50%);width:42px;height:4px;border-radius:999px;background:rgba(255,255,255,.38);z-index:20}
  .work-index-close,.about-close{top:20px!important;right:18px!important;width:40px!important;height:40px!important;border-radius:50%!important;background:rgba(255,255,255,.08)!important;font-size:30px!important;display:grid!important;place-items:center!important;z-index:30!important}
  .work-index-label{left:20px!important;top:28px!important}
  .work-index-list{padding-top:66px!important;scroll-snap-type:y mandatory!important}
  .work-index-item{height:calc(92dvh - 66px)!important;padding:14px 16px 24px!important;scroll-snap-align:start!important}
  .work-index-card{width:100%!important;height:100%!important;border-radius:14px!important}
  .work-index-meta{left:20px!important;right:20px!important;bottom:20px!important}
  .work-index-title{font-size:clamp(34px,11vw,58px)!important}
  .about{padding:74px 22px calc(var(--safe-bottom) + 30px)!important;display:block!important;overflow-y:auto!important}
  .about-grid{display:block!important}
  .about h2{font-size:clamp(56px,16vw,92px)!important;line-height:.88!important;margin:10vh 0 28px!important}

  /* Menu remains a true full-screen app layer */
  .menu-overlay{position:fixed!important;inset:0!important;width:100vw!important;height:100dvh!important;z-index:700!important;background:#050505!important}
  .menu-close{top:calc(var(--safe-top) + 16px)!important;right:18px!important;width:42px;height:42px;border-radius:50%;background:rgba(255,255,255,.08)!important;font-size:30px!important;display:grid;place-items:center}
  .menu-links button{font-size:clamp(54px,17vw,88px)!important}

  /* Project video: genuine full-screen layer */
  .detail{
    position:fixed!important;inset:0!important;width:100vw!important;height:100dvh!important;
    z-index:1000!important;background:#000!important;border:0!important;border-radius:0!important;padding:0!important;
    opacity:0!important;visibility:hidden!important;pointer-events:none!important;transform:translateY(24px)!important;
    transition:opacity .18s ease,transform .24s cubic-bezier(.18,.78,.2,1),visibility 0s linear .24s!important
  }
  .detail.open{opacity:1!important;visibility:visible!important;pointer-events:auto!important;transform:translateY(0)!important;transition-delay:0s!important}
  .detail-top,.detail-info,.next-video{display:none!important}
  .video-wide{position:absolute!important;inset:0!important;width:100%!important;height:100%!important;border:0!important;border-radius:0!important;background:#000!important;overflow:hidden!important}
  .video-wide:after{display:none!important}
  .video-wide>img,.video-wide>video,.video-wide>iframe{position:absolute!important;left:50%!important;top:50%!important;inset:auto!important;transform:translate(-50%,-50%)!important;width:100%!important;height:100%!important;object-fit:contain!important;object-position:center!important;background:#000!important;border:0!important;filter:none!important}
  .video-wide>video,.video-wide>iframe{z-index:2!important}
  .video-wide>img{z-index:1!important}

  .mobile-video-topbar{position:absolute;top:calc(var(--safe-top) + 12px);left:14px;right:14px;z-index:30;display:flex;align-items:center;justify-content:space-between;pointer-events:none}
  .mobile-video-topbar button{pointer-events:auto}
  .mobile-icon-btn{width:42px;height:42px;border:0;border-radius:999px;background:rgba(14,14,14,.56);color:#fff;display:grid;place-items:center;backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);box-shadow:0 6px 24px rgba(0,0,0,.2)}
  .mobile-icon-btn svg{width:21px;height:21px;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
  .mobile-video-tap{position:absolute;inset:0;z-index:10;border:0;background:transparent;padding:0}
  .mobile-play-feedback{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%) scale(.88);width:68px;height:68px;border-radius:50%;background:rgba(0,0,0,.48);display:grid;place-items:center;color:#fff;opacity:0;z-index:24;pointer-events:none;backdrop-filter:blur(10px);transition:.16s}
  .mobile-play-feedback.show{opacity:1;transform:translate(-50%,-50%) scale(1)}
  .mobile-play-feedback svg{width:29px;height:29px;fill:#fff;stroke:#fff}

  .mobile-video-ui{position:absolute;left:0;right:0;bottom:0;z-index:22;padding:100px 16px calc(var(--safe-bottom) + 16px);background:linear-gradient(to top,rgba(0,0,0,.88),rgba(0,0,0,.48) 42%,transparent);pointer-events:none}
  .mobile-video-content{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:14px;align-items:end}
  .mobile-video-meta,.mobile-video-actions,.mobile-progress-wrap{pointer-events:auto}
  .mobile-video-title{margin:0 0 5px;font-family:Impact,"Arial Narrow",sans-serif;font-size:25px;line-height:.96;letter-spacing:.025em;text-transform:uppercase;font-weight:400}
  .mobile-video-sub{margin:0;color:rgba(255,255,255,.7);font-size:11px;line-height:1.45;max-width:30em}
  .mobile-video-actions{display:flex;flex-direction:column;gap:9px}
  .mobile-video-actions .mobile-icon-btn{width:40px;height:40px}
  .mobile-progress-wrap{margin-top:14px;display:grid;grid-template-columns:36px 1fr 36px;gap:8px;align-items:center}
  .mobile-time{font-size:10px;color:rgba(255,255,255,.7);font-variant-numeric:tabular-nums}
  .mobile-progress{appearance:none;-webkit-appearance:none;width:100%;height:20px;background:transparent;margin:0}
  .mobile-progress::-webkit-slider-runnable-track{height:3px;border-radius:999px;background:linear-gradient(to right,#fff 0 var(--progress,0%),rgba(255,255,255,.3) var(--progress,0%) 100%)}
  .mobile-progress::-webkit-slider-thumb{-webkit-appearance:none;width:12px;height:12px;border-radius:50%;background:#fff;margin-top:-4.5px}
  .mobile-progress::-moz-range-track{height:3px;border-radius:999px;background:rgba(255,255,255,.3)}
  .mobile-progress::-moz-range-progress{height:3px;border-radius:999px;background:#fff}
  .mobile-progress::-moz-range-thumb{width:12px;height:12px;border:0;border-radius:50%;background:#fff}
  .mobile-swipe-hint{position:absolute;left:50%;bottom:calc(var(--safe-bottom) + 110px);transform:translateX(-50%);z-index:23;font-size:9px;letter-spacing:.14em;text-transform:uppercase;color:rgba(255,255,255,.66);white-space:nowrap;opacity:0;transition:.25s;pointer-events:none}
  .mobile-swipe-hint.show{opacity:1}
}

@media(display-mode:standalone){html,body,.app,.stage{background:#000!important}}